Launching the TheKnot.com Search BETA

Screen Shot 2012-12-24 at 4.22.03 PM

My major project of 2012, TheKnot.com Search BETA, launched earlier this month, the morning of December 14th, and it was a journey worth documenting. It began back in May when the company decided to start our own labs or internal incubator groups. One began right away in New York City and the other started a couple weeks later in Austin. I had the opportunity to join the Austin group with a team of developers and product people that I highly respected. I was grinning the whole time with excitement. With the direction that we were independent from the company but had access to the data we sequestered ourselves in a room for a few weeks. Over pots of coffee and pints of beer after work we brainstormed our some good ideas for our brides to find inspiration for their weddings. Our group started out as Judy Galani, Product Strategist, Forrest Andrews and Matt Oehlers, Senior Software Engineers, Erin Bender, Freelance Art Director, and myself as Interactive Media Developer. We “sold” the idea and working prototype to our “investors” by October and it was then time to go from prototype to production.

We had to take the design in house from this point on, but after a fond farewell and thank you to Erin we started to add in more management to the group. It was a greenfield project so our back-end developers Matt and Forrest were excited to push forward into new territories. Within a day or two we were able to deploy projects straight from Visual Studio to the AWS servers, I was blown away. Forrest focused on our MongoDB NoSQL data store and the API that I would later pull all the front-end content from, ASP.NET MVC. Matt worked on massaging the data into Apache Solr and in a matter of days we had an impressive result set coming back for queries.

Screen Shot 2012-12-24 at 4.22.40 PM copy

The front-end technology was built to be a responsive two page website that used a combination ofjQuery and Underscore.js along with HTML and CSS to create a multi-device interface that would be familiar and easy to use. The main grid view uses Masonry to create the Pinterest-esque layout for search results and Underscore.js templates to load in a different layout for different data types. The single page view focuses on a low browser width touch interface to give a very image focused search experience. To combine and minify the page scripts down I used the BundleCollection library in ASP.NET MVC which worked great. There are still a large number of extra scripts on the page but I’ve tried to load them asynchronously and not let them interfere with using the interface immediately.

The site has been up and working great for a few weeks now and launched along side a new look and feel for TheKnot.com. Go take a look, and of course let me know if you find any bugs here or on the feedback tab on the bottom!

Continue reading

Magic Eight Ball with the Raphaël JavaScript Library (1.5.2)

Wrigley’s Magic Weight Ball is my first project using the Raphaël JavaScript Library and it just went live. I used Raphaël JS version 1.5.2 which you can download from GitHub. The project requirements came through as only being an iPad version that responded to a shake event. Getting to use a new technology for a front-end project where you only have to support one resolution and one browser is an excellent opportunity to try new things. I knew in the back of my head that they would want a non-shakeable static version as well but they just didn’t ask for it yet. Internet Explorer still came into consideration when I was evaluating technology solutions because I was certain it would come up eventually.

When I saw the Nissan Leaf site I was blown away by the heavy JavaScript animations being used. It really reminded me of the early Flash animations and sites in a way. The Hacker News submission I saw the site from pointed out that the animations were being handled by the Raphaël JavaScript Library. This was still fresh in my mind when I got this project so I loaded up the Raphaël demos pages in a ever browser I test on, IE6-9, Safari, Firefox and Chrome and they all worked! This was the library for this project.

I finished up the iPad version of the site http://content.theknot.com/sitelets/magic-weight-ball/ipad which requires iOS 4.2 or higher and was pretty happy with the results. It responds to a full shake event to give you another tip, the tip will bob lightly in the water when moved a little bit and the tip orients to the iPad. When the tip is touched it provides a little modal with more details. The site even supports landscape and portrait viewing.

About half way through developing the iPad version the email I was expecting arrived. “Oh no!” they said, “We need a static non-shakable version for desktop users to visit.” I was already prepared though. When I though about a desktop version I first defaulted to Flash but I wanted to give Raphaël a try first. With a IE6 PNG alpha transparency fix and a small work around for IE to get the Raphaël image src it was up and running on the desktop.

You can visit http://content.theknot.com/sitelets/magic-weight-ball/ to see the result and if you happen to hit the page in an iPad you will get a slightly modified version that still responds to the shake events, always giving the best experience possible.

The weight ball interface itself is a series of 3 layered PNG images. The top most image is a 24bit eight ball and the rest of the tips, triangles and back black images are all 8bit PNG images with the a properly picked matte color. The total site size was reduced as much as possible and the designers loved the look. I reduced the number of colors where ever possible and used a pattern dither, it really seemed to look the best even though it bumped up the file size a bit.

For this animation interface the Raphaël JavaScript Library was a perfect fit and I was able to provide a cross platform and cross browser experience that I was very proud of.

DiveIntoThePool.com free online dating site launched!

This main page is practically a launch announcement site at this point. It’s been a long hard road to launching DiveIntoThePool.com and I’ve so far met all my goals I set out to when beginning development on the site. It was in a language I’ve never used, ASP.Net in C#. On a platform I didn’t know, Windows and IIS hosting. It gave me more experience in designing database driven applications and I started completely fresh on MSSQL as well. It’s been over a year and a half since I started this and I feel so great having designed, developed, managed and launched this project finally. Now the fun begins. From here on in I’ve got to use everything I know about SEO and marketing techniques to promote my new website as I refuse to let it become dormant as I’ve seen so many dating sites do. I’ve setup a blog for the site as well to talk about things that are specific to that project. You can follow the project on twitter, Facebook or MySpace too! Let me know what you think of the new site or if you create a profile!