The Convention Centre of the Future
A few weeks ago we launched an all new website for the RBC Convention Centre Winnipeg, highlighting the upcoming expansion of the facility and showcasing the massive investment in convention infrastructure in Winnipeg.
This is one of the most complex responsive websites that we have produced to date. The website features prominent photography, webfonts from Hoefler Frere-Jones (a Manoverboard first), customized Google calendar feeds, slideshows, an archive of downloadable documents, interactive maps, and four unique levels of navigation. Oh yeah, and everything is responsive—meaning that the site needs to elegantly adapt to nearly all mobile devices such as smartphones and tablets. I’ll elaborate below on how we overcame some of these challenges and some of the decisions we made to ensure content is delivered easily.
So Much Nav
Not only does the RBC Convention Centre website serve to function as a showcase of the Centre’s current facilities, it also shows off the expansion highlights and promotes the city as a whole. The marketing strategy, thanks to the hard work of Beyond Referrals, positions the RBC Convention Centre as a central hub in Winnipeg, around which orbits its many convention partners—the Canadian Museum for Human Rights, the new Richardson International airport, the MTS Centre, Assiniboine Park, and others. In short: Winnipeg is Canada’s Newest Convention Centre. This focus is highlighted in the orange navigation at the top. The events page, previously located a few pages deep on the old site are included here at the top level to bring them into the spotlight.
Next, the website needed to communicate critical information quickly to everyone—where to park, what’s for lunch at the cafe, what room configurations are available, how an exhibitor can order electrical services, how much WiFi costs, etc. The list went on and on. Planners, exhibitors and attendees all require relevant, immediate access to different groups of information, so we felt it best to group content most relevant to those groups together. This second level of navigation is seen in the blue navigation below the banner images.
Next, corporate and contact information are found in the top nav, where people expect them to be, along with a couple more frequently used pages called out for direct access.
Lastly, all of the information needed to be responsive–to respond to browsers on smartphones and tablets . You’ll see that the site’s menus automatically rearrange to best utilize the available screen real estate, whether that screen is very large or very small. In fact, if your monitor is big enough, you’ll be able to see all four configurations of the menus by scaling your browser window big and small right now; just drag the lower right corner of your browser left and right.
Fixed Header Images
Arguably one of our favorite features of this site is the banner images. When any given page loads, the large photos at the top are quite striking, but you only see the real magic when you scroll down. The banner images are fixed in place so that when you scroll, the website slides over top of it. It’s difficult to explain in words, but if you visit the site, you’ll see what we mean.
HFJ web fonts
We’re also super-excited about using Hoefler Frere-Jones’ new webfont service. This site is the first opportunity we’ve had to use HJF’s hard-working Gotham on the web. Gone are the days of simply choosing Arial, Georgia, or Verdana as your font face. Web typography has evolved drastically and will continue to do so for many years to come.
Calendars and documents
A website shouldn’t just look good and function well, it should also be easy to edit and update by someone with minimal content management or computer experience. That’s why upcoming events and daily cafe features are managed by adding events to familiar Google calendars. The calendar events are pulled into the site automatically and show up in all the right places. Adding order forms and catering menus is easy too thanks to a file management system built specifically for WordPress. When a new menu or form is uploaded, it need only be tagged with the appropriate category such as “order form” and it will automatically show up everywhere it’s supposed to.
Event Planner RFP
One of the most important pages of the site is the RFP form. Completing a form is the most efficient way for an event planner to inquire about hosting an event at the centre. We’ve set up an easily digestible web form with large text fields to make this less of a chore. No one likes squinting to read those tiny labels. The RFP form is also totally responsive, and collapses to a single column on a mobile phone. You can even talk to Apple’s Siri (if you like that kind of thing) to fill the whole thing out without typing a word—bonus!
Performance
Generally speaking, the more features you add, the slower your site becomes. To overcome this we are using a number of performance enhancing features such as image sprites, caching, minifying, htaccess tweaks, and several more. Without drifting off into an enthusiastic tangent filled with web jargon, we’ve essentially managed to reduce site load times by more than half.
To Infinity and Beyond
The website is live and delivered, but a web designer’s job is never done. We’ll be reviewing user feedback over the next couple months as our ongoing relationship with the convention centre continues and as the expansion unfolds. For those of you looking for a venue for your next event from 12 attendees to 12,000, we strongly invite you to consider the RBC Convention Centre Winnipeg.
Many, many thanks to everyone at the convention centre for their guidance, to Cal Harrison of Beyond Referrals who led project strategy, and to Karen Ilchena of Ilchena Communications who developed all copy and content infrastructure.
Faviconaliscious
Personally, my favourite part of the site is only 16 pixels tall. We hand drew a custom favicon to appear in browser bars and bookmarked pages. Take a look! You’ll see the famous RBC lion perched on the globe and our now icon orange bar sitting at the base.