New Design and Upgrade for GatorTailgating.com (plus free beer)!

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
mherchel's picture

New Design & Upgrade for GatorTailgating.com (plus free beer)!

I wanted to share this with everyone because some of what went into this was learned directly from February's Drupal camp. We've put a lot of work into this (and went live with it last night 3/30/10), and some of the design elements would not have been possible without Drupal camp. I also really enjoyed some of the case studies, so I decided to do my own.

Also, if there are any Drupal-lovin' Gator fans (or opposing fans) out there, definitely check out the site and join up. Plus, if anyone makes it to any of our tailgates, track me down for some free beer (which we all know is why you clicked on the link!)

GT's History with Drupal

The Drupal CMS has been excellent to GT. But, this redesign was a long time coming. The original website was designed in Drupal 5 about two years ago. It was my first ever Drupal website (definitely a steep learning curve, but worth it). When I initially developed it, I did a lot of things wrong. For example, I installed all the contrib modules in the /modules/ directory, and themed the site by modifying the default Garland theme. The site's undergone one minor redesign since then, but this is the first upgrade and major redesign.

About the Website

GatorTailgating.com is a place where the Gator Nation (and opposing fans) get together and converse on forums, post stories, & upload gameday photos and videos (read our About Us page for more). We also had Location/GMAP features built in (and soon to be re-added) where users could indicate their tailgating location to everyone else. In addition, we host tailgates on UF's campus on gamedays. Currently, the website has about 1,500 registered users, but most of our traffic is anonymous users coming via search engines and community links.

Goals for the Redesign & Upgrade

  • Increase user participation.
  • Increase sign up rates for free user accounts (taking advantage of all this anonymous traffic)
  • Leverage Facebook to gain additional readership and participation
  • Decrease bounce rate (meaning to lead the user to look at more pages after landing on our site from Google)
  • Clean Up the website, and make it look more professional

Execution Part 1 - The Upgrade

The first step in the process was to upgrade the current site from version 5.13 to 6.16. To do this, I first had to set up a development server to test on. I FTP'd the all of the files to the new server, used the Backup Migrate module to backup the production database, and imported it using the dev server's PHPMyAdmin. From there, I just modified the settings.php file to point to the correct database and set some file permissions. At this point, I had a functional development site.

For those of you who haven't had the pleasure of going through a Drupal update, I'm pleased to tell you that in my case, it was a breeze. Here are the basic steps that I took:

  1. Switch back to the default Garland theme
  2. Uninstall all contrib modules
  3. FTP up the new Drupal 6 files
  4. Run update.php many times
  5. Install the updated modules (starting with CCK) and hit update.php again.
  6. Rinse, wash, repeat
  7. Theme

At this point, I had to modify my old theme to work with D6. Most of this was just copying and pasting PHP snippets from the default Garland theme to the new theme. I also had to redo a little bit of CSS, but it was nothing especially challenging.

Execution Part 2 - the Redesign

With the main focus being to increase user participation, we moved the recent forums block up to the top-center of the page (see the old design here, and the current site here). We implemented the Views Carousel module to display user uploaded images in a friendly and fun way.

A couple ideas that we took from Claudio Luis Vera's excellent presentation on Gables Home Page is presenting news in a facebook style way (with the feature image to the left, and content to the right), and we also took inspiration from his call to action (user sign up) block.

To implement the facebook-sytle news display, we kept a large feature story and used Views Attachment Displays (which I learned about in Doug Vann's presentation about Views) to attach a view to the feature story. We then used the "Rewrite the Output of this Field" feature (also learned about in Doug's session) to format the data into nice divs with classes for easy CSS formatting.

Other tips learned from Drupalcamp Florida was the Compact Forms module (which puts the form element label inside the form element), the administration theme module, and the awesome Devel Theme Developer module.

Only local images are allowed.

Concerns

Although the new design definitely solves a lot of issues, our main concerns are

  1. HTTP Requests - with the views carousel downloading 20 images, we have about 30% more HTTP requests than before. To combat this, we've implemented Javascript aggregation, CSS aggregation (which was previously implemented), and CSS sprites.
  2. Too 'Slick' of a Design - Sometimes ugly websites do better than pretty websites. Ugly websites can feel more 'authentic', while pretty websites feel more corporate and out of reach. To combat this, we're concentrating on user generated content, and we've also re-written our About Us page to seem a little more down to earth
  3. Old Browser Compatibility - Would you believe that we still have about 15% of our users in IE6?? We're currently working to make this site work the best as we can with this piece of **** browser, but we had to strip it down a bit - even disabling the carousel.

To Do

One of our main focuses on this design was to roll it out before the Gators' Spring game on April 10th (ya'll are invited to tailgate with us, btw!). So we launched the new design still having some important steps to do

  • Theme User Profile Pages - I've spent an inordinate amount of time trying to get this work (either via Content Profiles, or theming Drupal's user-profile.tpl.php), and I'm still not able to get this exactly where I want it. My next step is to test out the Advanced Profile Kit module
  • Implement Drupal for Facebook - While we do have a Facebook Connect box, that is being generated by Javascript obtained from Facebook. This new module should allow people with FB accounts to interact on this website pretty easily.
  • Reintegrate Location/GMAP

Conclusion

This upgrade/redesign went a lot smoother than I thought that it would. We're all really excited about it! I definitely want to thank Drupal (without which our website would not be nearly as cool), and Drupalcamp Florida (without which I wouldn't know how to do what I did!). Last but not least, I'd like to thank all the contrib module authors for making Drupal so darn flexible!

If anyone has any questions, let me know.

Check it out!--> GatorTailgating.com

PS: GO GATORS!

 

Comments

As far as IE6 and the

pumpkinkid's picture

As far as IE6 and the carousel Did you verify if you are over the 31 css limitation? We corrected the issue we had with our carousel by using the css optimize option under performance...

Thanks for the heads up... we

mherchel's picture

Thanks for the heads up... we are aggregating our css (so there's only 3 files to download)... but its interesting to see that you have it working. I'll have to give it another go.

Thanks!

lol silly me I forgot to

pumpkinkid's picture

lol silly me I forgot to check that myself :-P sorry, umm, I'll have to think about that then because I was under the impression that was the issue we had found...

What module are you using for that?

Using Views Carousel. Thanks

mherchel's picture

Using Views Carousel. Thanks anyway :)

Florida

Group organizers

Group categories

Florida Topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week