Archive for the ‘JavaScript/JQuery’ Category

Chicago Low-Income Housing Trust Fund

Wednesday, September 12th, 2012

I came across this project through a great non-profit organization called the Taproot Foundation. Taproot puts together small development teams and pairs them up with non-profits that need work done but don’t have the staff or funds to make it happen on their own. I was teamed up with a project manager, developer, content writer, and marketing specialist.

Chicago Low-Income Housing Trust Fund (what a mouthful) needed a basic website that showcased all the great work they do finding and distributing low cost housing to families in Chicago. This was a very interesting exercise for me because I’m used to working in Lead Gen and attention-hungry startups, while CLIHFT is basically a city government entity that operates in pretty much the opposite way. They don’t really want or need attention from the public, as they don’t have the staff to field calls or answer emails all day. This site is just so they have a resource to show people what they do and what they stand for. I tried to go for something fairly warm, yet sober and informative. homepage sliders

Sunday, March 4th, 2012

For this project I was tasked with updating the interactive slider or “TV Screen” that lives on the homepage of For the past few years this animated slider, which promotes new and recently updated content, was created in Flash. This presented a few problems for us. First, every time we needed to make a change, I had to manually open up the project and make changes to the images and the animation. Second, because it was written in Flash, anyone who was viewing the site with an iPhone or iPad would just see a static image pointing to a single section of the site. And third, we weren’t using the power of our CMS, having content updated daily and keeping the site “fresh.”

With these new versions of the homepage slider and the photos page slider, all three of these concerns have been addressed. These were created using JQuery and the content is being dynamically pulled from the Ektron CMS that uses. Additionally, to give the pieces a little more of a designed feel, I used a unique font, hosted by Google Fonts and some CSS3 tricks, like text-shadow and opacity.

It may not be obvious from the pictures below, but users can use the numbered buttons to navigate between slides or can over over the main image to see arrows that take you back and forth. The slides automatically advance every 4 seconds or so, but if the user interacts, the animation stops.

To see the live version of these sliders, see these pages: homepage and Photos homepage

“Get the Look” A.K.A. Design Boards

Monday, January 23rd, 2012

I felt this was an ambitious project Kitchens undertook. Take a look at the live pages here. The basic idea was to have a interior designer choose a variety of kitchen products (cabinets, counters, ranges, etc) and put together a “Design Board” reflecting a specific style or feeling. Then we take those selections and our 3-D artist builds and renders a virtual kitchen. Then the design team creates a design board for the web and we upload product images and a slideshow of the renders. Users can browse Design Boards to “Get the Look” and they can view the slideshows to “See the Look.”

I had quite a big role in all this. I created a few of the actual design boards, optimized the images and logos for the web, worked on some of the code (helping with the “See the Look” JavaScript, for example), and did all of the CSS for the pages. A large part of this project was finding the best way of utilizing our CMS, Ektron, to create the pages. Also helped with the JQuery Slider on the Index page.

Can simplifying elements yield higher CR?

Friday, September 2nd, 2011

On certain pages of Total Attorneys’ sites, like, they had a flash map to entice consumers to find their state and get linked to a local attorney in their area. If you clicked on your state (by name or by the graphical map) you were taken to a subpage for lawyers in your state. Pretty straightforward. But the map was HUGE and because all the state names were repeated above the map, the whole piece was even bigger. Though eye-catching and interactive, it was a lot of real-estate to devote to a simple idea: funneling users through to subpages.

So, we decided to make a simple dropdown menu instead. I used a jQuery plugin called Chosen to give a little more functionality. When you drop the menu down, you can type in the state name to get to it faster. Also, as soon as you choose one, you get automatically sent to the sub page. No submit button necessary (except on IE, natch).

And yes, this change positively effected conversion rates through these pages. This is ultimately very satisfying because most viewers convert from the home page or maybe an article page, getting positive lift from the state lawyers page is basically gravy.