Objective: With very high traffic and an ever-increasing number of visitors using mobile devices, the need of a mobile website was obvious. Users could already access the mobile site on m.mnn.com, but it contained only a fraction of the normal website content. This shortfall led to the need for a more robust and responsive mobile website.

Challenge: Provide a better user experience on mobile phones while managing massive amounts of content.

Solution: We initially started working on the existing theme, and added responsive behavior to it. However, after discussing the future complications with MNN, we started work on a whole new theme from scratch. While the current theme was restrained to a limited number of devices, with extra markup and hi-resolution images causing performance issues, the current theme now has options to extend the mobile site, and incorporate the full (desktop) site in the future.

We used modules like Mobile Switch, Mobile Detect, and Browscap to switch the theme depending on the visiting user-agent. Starting off by breaking down the site per feature and identifying common patterns with an accompanying style guide, we followed the mobile-first workflow to support the maximum number of mobile devices. We also used font-icons and SVG to limit the number of decorative images on the site. These are sharp in every resolution and help in boosting load performance as well.

Result: Mother Nature Network now has a website that can target a much larger audience, and a pleasing user experience. This has also helped to improve performance on devices with limited bandwidth or in slower speed locations.

A responsive website developed for Mother Nature Network, to ensure viewer-friendliness on popular mobile devices, alongside handling massive amounts of data targeted to a large audience.