Defense Language Institute eLearning Responsive Game Template Development
Defense Language Institute
Project Manager, Ui Design and Front-end Web Design.
Atom and GitHub.
HTML and CSS.
We were unable to use frameworks so we had to custom code all templates.
The assumptions that I had made when first designing the eLearning game templates was that we could design responsive web pages.
Early Mockup Explained
I had to create a more user-friendly, user interface to match our design patterns and build a better user experience.
These are the original Sketch hifi comps that I used for referencing purposes to build the desktop and mobile interactive website pages.
Family 02 Template Animated User Experience Slideshow
By the end of the project our team had completed a total of 40 eLearning game templates. We used GitHub for version control and error reports. I was also responsible for reporting/fixing bugs and cross browser testing for desktop. The minimum requirement was that all game templates must work in ie 9 and up. The original assumption that we could design for a responsive experience was incorrect. The frame work relied on an iFrame to import the game template, meaning that responsive environment was removed because of the iFrames limitations in modern web borrowers. The solution that I came up with was that I designed all my templates for a responsive experience and then I changed the final template to a fixed width and removed the calc responsive width in css. This will allow future developers to easily make the template responsive when the iFrame is depreciated for future browsers. Please ask to view source code in person.