Free Website In A Day for Non-Profit

We had an exciting day on April 6, 2013, when our team built a six-page, custom-designed, responsive website in the all-day Hackathon for Charity sponsored by WIMP – Web and Interactive Media Professionals of Sonoma County. Our team competed against several others all building a Website-In-A-Day for local non-profit organizations.

Our winner was Jill Butler and her team of forest management specialists who volunteer their time to help private landowners in Sonoma County manage their forests and oak woodlands. They didn’t have a website and they didn’t have a budget. They needed a website that was flexible and fast because many landowners are in the field when they have questions about pests or erosion or fire safety. The website had to look great on full size monitors but still work well on tablets and smartphones.

Lucky Jill displays the brand new letterhead and business cards featuring the new logo that Ben Grace custom-designed for them.

Bootstrap – Our Secret Weapon

Designer Ben Grace (top of photo) worked closely with developer Jake Spurlock (plaid shirt) to build the web pages, the navigation, and to launch the website in an intense day of work. The client, Jill, and Anet are at left, pounding out text to fill the webpages. Jill’s associates stood in the doorway, absorbed in the process. Ben and Jake were proud of their 57 git commits and the very terse code they produced.

Jake Spurlock wrote the book on Bootstrap (download a sampler.pdf) which was developed by Twitter and is available free from GitHub. Here is Jake’s GitHub body.less CSS for the website. Bootstrap supports responsive design by dynamically adjusting the web page layout so that Sonoma Forests has a website that looks impressive on full-size monitors as well as tablets and smartphones.

Built For Speed – How We Did It

Great visuals make a great website when they tell a strong story. Working with the client, I wrote a compelling headline and a paragraph of text for Ben and Jake at the very beginning of the project. With the content strategy clear from the start, Ben and Jake selected the images and created the design to telegraph the wealth of resources available on the website.

Jake put the headline and paragraph in a simple HTML wireframe using Bootstrap. He created several PNGs of different layouts to help with design discussion. Ben selected the images and refined the colors, building pages as Jill and I produced content. He commented that having a content concept BEFORE creating the visual design was very helpful.

The client was thrilled with a website she could update herself, and the team rocked the competition with a custom design and flexibility that will work well for years. Yea, Team!

Very nice. I love the big image on SonomaForests.org, the clean clear font, the ease of use and as always with your work, the use of white space. Let’s not even talk about how it got done in a day. It would take me that long just to collect my thoughts!