With such a high traffic and increasing number of visitors from mobile devices it was obvious to serve the users better by providing a mobile site. Users could already access the mobile site on m.mnn.com however the site only had the fraction of the content being displayed on the full blown site.
Provide the a better user experience on mobile phones while managing behemoth of a content.
Initially we started by working on the existing theme and adding responsive behavior to it. However later after discussing the future of MNN we started from scratch with a new theme. With the current theme we were restrained to a limited number of devices as there was extra markup and hi-res images that were causing performance issues. With the current theme we now have options to extend the mobile site to incorporate the full site (desktop size) in future.
We used Mobile Switch, Mobile Detect and Browscap to switch the theme depening on the user-agent. We started 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 maximum number of mobile.
For limiting the number of decorative images we are using font-icons and SVG on the site. These are sharp every resolution and help in boosting the performace as well.
We now have a website where we can target a larger audience and with a pleasing user experience. This has helped in imporving the performance on devices with limited bandwidth or slower location.