The second most-read Canadian magazine, Canadian Geographic’s online experience paled in comparison to the print edition. Embarking on a transformative digitalization roadmap to increase engagement, subscriptions, donations, and advertising, Canadian Geographic’s first step was a new, flagship website.
Rethinking the digital publication from the ground up, Strut leveraged digital opportunities to surface content and bring it to life in ways not possible in the printed issues. This includes a collection of powerful tools facilitating search and organic browsing, serving relevant stories to a reader curated from 10 years of articles, and creating an online experience that feels familiar to readers of the physical magazine.
With an over 92-year legacy, we felt a responsibility to honour the print version of the magazine within the website design. The home page reflects the magazine’s covers, with a full-screen feature photo and large, centred logo to emulate the Canadian Geographic masthead, which shrinks into the nav bar as a reader scrolls into the home page content. Design elements like black text against white, drop caps, and a serif font for body copy express the editorial nature of the magazine.
We designed multiple content blocks to customize the presentation of articles on the home page in order to improve user experience, and increase reader interest and engagement. This is achieved by organizing a mix of article types by categories and topic tags to provide a multitude of entry points for the reader.
One of our primary goals is to increase a reader’s time on the site, so we developed multiple ways to promote exploration. Most visitors enter the site through organic search, so the basic tactic is to serve up a selection of directly related content and suggested articles of interest-based on the categorization of the reader’s initial article.
Layering additional tools for exploration, the main navigation encourages browsing by featuring topics of interest at the top of each page, category tags are placed at the end of each article, and readers can search by past issues of the magazine which populates online articles found in that specific print edition.
The star of this site, however, is the powerful search functionality which presents results as an automatically curated “landing page” for the search term instead of the typical results list approach. This page displays the most relevant stories first, then organizes results by content category tags such as Wildlife, Kids, Mapping, Travel, People & Culture, Places, Photography, Articles, Podcasts, and more — all presented in a visually rich manner
One of four article page templates created to support Canadian Geographic’s brand approach to storytelling, map articles like this one on Toronto’s Broadview Hotel intertwine a text article with mapping and images. Scrolling through the story centres and highlights locations on a map, and likewise, clicking on a location jumps to the relevant content within the article.
Big, beautiful photographs are an integral part of Canadian Geographic’s storytelling and brand. The magazine has an impressive roster of amazing professional photographers, along with 70,000+ amateur Photo Club members capturing breathtaking glimpses into everything Canada. Photo story pages minimize the width of the text column to maximize photos on the right, while clicking on an image opens a carousel view with full-size photos and accompanying captions.
As part of our core belief in an internet for everyone, the Canadian Geographic website, like all our builds, meets at minimum the WCAG-2 AA standards. Typography was carefully considered due to the amount of long-form content. High-contrast text, optimized font sizes, and clear information hierarchy address both accessibility and scannability — since designing legible text for users with disabilities is also more user-friendly for the majority of readers who skim online text content. Additional accessibility features include easy keyboard navigation, and alt text and captions for images.
This flagship website contains a lot of little details to improve the users overall online experience in subtle ways, including:
Are you sure you want to do this?