Utilizing Responsive Web Design to Create a Common Code Base to Support Multiple Devices for Nutrigen’s Existing Pong System

George W Smith (Dr. Powell), Department of Computing Sciences

A short five years ago, web based applications were confined to laptops and desktops. The large screens made the development of a single, mouse driven, web application for both devices simple. However, the overwhelming popularity of mobile phones and tablets of varying dimensions, functionality and resolutions has made the single application unusable. Today, application developers are faced with the problem to not only write and maintain code in the native programming language of each device, but to also create separate design layouts for every different device size. Mobile first, responsive web design is an emerging approach that offers developers tools to create a single application that can dynamically change its appearance and functionality relative to the screen size of the device. The hypothesis of this research is that responsive web design has matured to a point that a single code base can support legacy applications with dynamic layouts customized for all popular devices. The hypothesis will be tested by redesigning and reimplementing a legacy nutrition planning system called Pong by Nutrigen and demonstrating the system running on phones, tablets, laptops and desktops. The development occurred in four steps. The first step was to research Bootstrap, a leading mobile first, responsive web design framework. The second step was to iteratively create Bootstrap story boards showing the layout on each device until approved by Nutrigen. The third step was to port the business logic that powers the program to the Google Cloud using Java Servlets and Java Server Pages with a MySQL back end database. The fourth and most timely step was to develop the code to turn the storyboards into a fully-functional, interactive website. The presentation will include a live demonstration of the nutrition planning application on several devices and a discussion of the process behind designing both the interface and back end services. We will draw conclusions on the viability of implementing responsive web design for PONG deployment on multiple devices as well as highlight the potential benefits and drawbacks of using this approach.