In promoting their cameras, Nikon brought in Ashton Kutcher to act as a brand ambassador. MRM had already built a webpage to be paired with Ashton promotions, however this was difficult to view on mobile devices. Rather than the massive task of remaking the desktop site to responsive design, I, along with a back-end developer built out a mobile companion site in two weeks.
The Nikon mobile site is optimized for viewing on mobile phones, filling the full screen with a background portrait and message with gesture triggered, horizontal navigation bar at the bottom.
The drop down overlay navigation allows the user to navigate by camera images and allows users to exit the view by selecting a camera, reclicking the button, or tapping outside of the navigation.
Secondary pages present the cameras in a series with a horizontally scrolling navigation bar. The layout mirrors the home page for each series landing page.
Product pages feature a 360 degree view of the camera, a sample slideshow of pictures by the camera, and camera features presented below.
The 360 degree camera detail is responsive to gesture, spinning the camera around in a full screen view.
The full screen slideshow features images taken by the featured camera and reacting to swipe gestures.
As a small, light site, it would be overkill to build out an extensive CMS templating system. Instead, we built out templates using Mustache. This meant that we could design a structure of three core template—home page, landing page, product page—that are populated based on server side JSON. Mobile phones that navigate to the Ashton site are redirected to this site where they can browse the cameras and connect to Nikon’s main site to make purchases.
