THE NATURE CONSERVANCY

SNAP Website

Pushing Conservation Science Forward

Traditional ideas about conservation are changing. Some working in this arena are pushing for more pragmatic approaches—and ones that take human life into greater account. Enter Science for Nature and People (SNAP), a new scientific collaboration from The Nature Conservancy (TNC), The Wildlife Conservation Society (WCS), and the National Center for Ecological Analysis and Synthesis (NCEAS). Together, they’re engaging scientists around the globe to ask how protecting nature can help secure food, energy, and water for 9 billion people. TNC and its partner organizations needed a digital tool that would make their process and working group data accessible, attract good proposals, help establish connections with prospective partners, and build an audience for the research underway. more

Creating a Platform for Content and Media

Through research and discovery, we came to understand the relative complexity of the project. Research findings wouldn’t be available for a year, nevertheless, we needed to engage a broad audience, immediately. Therefore, we concentrated on developing a publishing platform that could be used now, while being ready to adapt when new content becomes available. We chose to produce a site using Responsive Web Design that would work on a wide variety of devices.

Given the varying types of visitors, we encouraged producing a compelling, clear, and usable site showcasing interesting content in a well-organized and intuitive structure. A consistent set of adaptable treatments, strong typography, and an image-rich approach would all help grab visitors’ attention and get them invested in the stories being told.

A Functional and Adaptable Publishing Device

The finished SNAP.is website is comprised of adaptable panels/slides built atop a set of custom post and presentation templates. Each of these can be organized and customized on-the-fly by SNAP Editors to meet the needs of specific stories. In conjunction with some added features and custom elements, we used WordPress to power the SNAP website. Doing so allows content creators to use a familiar platform, without being restricted to a standard (boring) blog format. Even at launch, the site feels vibrant and diverse, introducing the collaboration, Working Groups, and kicking off with a few articles. As the year progresses, and initial findings are released, SNAP promises to attract the attention of scientists, policymakers, field practitioners, and armchair observers alike. As a result, SNAP will build, motivate, and equip constituencies to turn results into action and enable better policies and more effective field practices.

more

The SNAP website functions as a platform, housing information about the initiative, results from Working Groups, and topical content (presented in the form of an online magazine). Therefore, a “cover” on the website home serves to introduce key content. By utilizing a responsive web design approach, this treatment adapts from one screen to the next, maintaining the same expansive sensibility.

Given the scientific, and sometimes heavy, nature of content showcased on the website, we took a deliberately clean approach with most pages. As such, panels like the one pictured contain text content that is terse, simple, and to-the-point.

Error 404 pages are useful in helping redirect visitors who mistype a URL, or try to access information that is no longer available. At smashLAB, we treat these pages as a little opportunity to have some fun—we believe that every detail matters!

Creating navigation systems that work on all screen sizes (i.e., smartphone, tablet, desktop) can be tricky—particularly in sites that have many nested pages. Therefore, we worked extra hard to design a system that allows users to quickly move around the site. To draw added emphasis to this area, we grey other content when the navigation panel is active.

snap-ipad-magazine-index.jpg
snap-ipad-magazine-index-more.jpg

SNAP Magazine leads with a feature story, and then leads through to other recent articles on the site. In order to attract the viewer’s attention, photographs are used heavily in the story lead-ins. We also highlight author names, as many of the individuals writing for SNAP are well-regarded in the scientific community.

snap-ipad-magazine-article.jpg
snap-ipad-magazine-article-text.jpg

A pleasant reading experience is key to the SNAP website. Therefore, we paid special attention to selecting an effective type family, optimizing typographic treatments, providing visual cues to help with scanning text, and in staggering images to provide relief during longer posts.

snap-about.jpg
snap-working-group-amazonia.jpg
snap-working-group-coastal.jpg

As a new initiative, it’s important for SNAP to engage new audiences and tell its story clearly. Therefore, a number of long-format pages serve a slideshow-like function, allowing readers to take a visual tour of key information (pages like About, and the Working Group summaries) and learn more about the scientific research being done.

Scope

  • Discovery and planning
  • Information architecture and user experience
  • Website, logo, and collateral design
  • Responsive website development
  • Consulting: content, launch, social media

Key Benefits

  • Common blog software speeds editing/admin
  • Design adapts to each viewing device/resolution
  • Adaptable panels showcase content beautifully
  • Content-focus allows for comfortable reading
  • Simple hierarchy clarifies messages

Technology

  • WordPress as blogging platform
  • Responsive layout w/adaptive images
  • Semantic HTML5 content structures
  • Flexible layout templates include parallax effects and CSS3 animations
  • Social media integration

Further Viewing

SNAP.is