GN+P 4.0: what this new site was designed to do

Posted by: Jesse Emery
Wed 01 Sep 2010 01:09 a.m.

Tags: digital, gardner nelson, internet, seo, social media, video, web, web development

Share via:

The last iteration of was built in 2007. While the Flash-based site was clean and simple, it had some drawbacks, and no longer reflected the full range of our company's capabilities.

When we decided to revamp the site, we set ourselves a few goals:

1. To reflect our growing digital and media capabilities, we wanted a site that showed off the growth in our technical capabilities, and spoke to our new media capabilities as well.

2. We wanted a site that was easier to update. Flash isn't always the easiest technology to version and integrate with content management.

3. The explosion of mobile browsing now means that our online audience is increasingly likely to checkout our site on their iPhone, iPad, or their Droid. To this end, we wanted all our content and work (except the Flash and Rich Media banners of course) to function just as well on a mobile experience as a desktop experience.

4. We wanted to support the future growth of our company, from a technology, content, and integration standpoint.

5. Our new site was designed to dramatically improve our SEO. While Flash is now readable by Google, individual content is still tracked to separate URLs, which had given us a very small search footprint.

We believe we have accomplished those goals through the new site. Some of the highlights we feel that address the above issues include:

- The site is now completely in HTML and all the pages have SEO-friendly and human-readable URLs. The only places where Flash appears are either examples of our work that are directly in Flash, or the Internet Explorer version of our video player.

- Database-driven and integrated with our internal systems. Our employees can now login with their network login, and administrate the site and maintain content from a web-based user interface. This allows us far greater flexibility for changing the site and allowing our other systems to hook into and make use of our content.

This technical foundation enables us to add a lot of flexibility in the future, including secure client logins, review of work, web-integration with our calendars, and more.

- Bigger, better video. Video on the Internet has changed a lot in just a few years. What was once the domain of YouTube and a few other startups is becoming more and more prevalent. As an agency, we felt we could do a much, much better job of showing off our video work on the web. To that end, we built the site from the ground up looking forward. We wanted our videos to not only be available across browsers and on mobile devices, but we wanted them to look good too. The newest browsers and phones play video without any need for plugins. Unfortunately, they all do it slightly differently at the moment. When we want to add a new video to our website, we upload a high resolution video through our web administration. The website then automatically converts the video into a total of seven different versions, to support different browsers and mobile devices. When the conversions are done, the site - all on its own in the background - then uploads the videos to our Content Distribution Network vendor, to ensure quicker downloads than we could ever provide on our own. Finally, when you go to a page, the site detects your device and browser and serves up the correct video player and video format just for you. If you're using Firefox or Chrome you'll see the custom Javascript HTML5 video player we wrote just for our site.

In the future, we'll be serving up 720p and even 1080p optional versions of our video and we're already experimenting with Google's new webm project.

- More work. A LOT more work. Perhaps the single most important thing we could do with the new site was make sure we did justice to how we showed the work we've done for our clients. Not only did we step up the video experience of our site, but all of the print, OOH and digital work is now displayed at much larger resolutions and in a format where it can more easily be shared around the web.

Great mobile support. The new site not only works on mobile devices, but supports touchscreen actions such as swiping (supplementing the left/right arrow functionality that desktop users experience), double tap zoom-to-content, and of course, the mobile video we mentioned above.

Overall, we're excited about the new design and think we've come along way toward achieving our goals. And there will be more functionality, more work displayed and more to read and do here in the future.

PS - Being able to update the site from your phone is handy when you spot typos, like I just did. 

New GNP site blog pic