Skip to content

Instantly share code, notes, and snippets.

@skippednote
Created August 1, 2013 06:00
Show Gist options
  • Save skippednote/6128742 to your computer and use it in GitHub Desktop.
Save skippednote/6128742 to your computer and use it in GitHub Desktop.

MNN Mobile

Case Study

Objective

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.

Challenge

Provide the a better user experience on mobile phones while managing behemoth of a content.

Solution

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.

Result

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment