In the spring of 2012, I began work on a complete redesign of the Iowa State Center website. The previous site was driven by .ASP, and it lacked a CMS (Content Management System). I decided to implement WordPress as a content management system. I used custom post types to display and organize events happening at the Center.
Project length: Five months
I designed the new website with all browser shapes and sizes in mind. Using a technique known as responsive design and media queries, the site will adapt to the size of the browser’s viewport/window. Try it yourself (just resize your browser window).
I used Twitter Bootstrap as a responsive framework for the site. I have to say, I’ve learned SO MUCH about good web practices looking through their code and documentation. Highly recommended.
WordPress as CMS
WordPress and I have generally gotten along in the past, so I decided to give it a go for the new website. Creating custom post types was relatively easy, and I used them when developing our events sections (using custom taxonomies to organize the events).
The blog posts feature of WordPress comes in handy when creating a News and Press section on the site. WordPress automatically creates RSS feeds for different categories of posts, so getting people connected and updated to the Center’s news content is easier than ever.
CSS3 and LESS
OK, I’m a huge fan of this thing I discovered recently: LESS CSS. It’s neat — you should check it out.
It’s basically an easier way to develop your CSS (with a very DRY approach). I love using functions, variables, and nested CSS. Pretty cool stuff.
I recommend it, though installing and compiling it on a Windows box was kind of a PITA.
Interactive Order Form
Since the Center’s agreement with its ticket company prohibits it from bypassing the company’s online order system, patrons can’t actually purchase tickets directly from the Center’s website.
However, immediately following the series launch, visitors have traditionally been able to download a series order form and complete it by hand.
My thought? Dumb. Old-fashioned. Can’t we at least make this process more enjoyable?
Enter: The Interactive Order Form. I populated all of the show ticket data (stored in custom post types in WordPress) into a form. As a user completes the interactive form, a jQuery function tells the user how much money they’ll have spent, saved, and how many tickets they’ll have bought (and to how many different shows).
The big seller here is, I think, the money saved figure. What better way to convince a non-subscriber to become a subscriber than to show them how much they’ll be saving in real-time?
After the user has made their choices, they can opt to download a fillable PDF version of the order form with their chosen shows filled in, complete with line subtotals. This took some coding on the server-side using a module called pdftk. If they don’t want to use the interactive form, they can — of course — download an blank form.
- CSS3 Keyframe Animations (homepage for the new series launch features a Shrek head-slide and a dangling piñata). Cool stuff, folks.
- Downloadable iCal information (for all events, single events) and Google Calendar integration
- Full calendar setup using FullCalendar.js
- Lots of (maybe too many) pretty colors. Hey — I studied journalism and Spanish in college.