Our group was determined to use responsive techniques and media queries to produce an entertaining, engaging project. The Alpha Submission showcased our understanding of the techniques involved – but lacked an outside of the box approach. We decided to create a riddle-based problem-solving project that requires media queries and device-specific problem solving to complete a riddle. This system allows users to connect mind and device together; through a plethora of devices and the use of logic. Our project provides an understanding of the differing device specific code that is used around the web and how content is displayed differently of various devices.
Our concept was first defined during a brainstorming meeting. We knew that an interactive presentation would be best – as it would involve members of our group, our program, and the public. We find that responsive and device-specific design and web pages are best understood through first-hand usage.
We began with a chalkboard sketch of the general format for the page. A decision was made that through the use of a beginning riddle – users will make their way to the end of the task by coming up with solutions for puzzles that lead from one device to another. Through this inter-device navigation – only some devices will display particular steps in the task. Therefore, users will find out the similarities and differences between browser types, screen resolutions and what particular technologies are displayed by individual devices.
For instance, a clue within the riddle may be viewable on an iOS device, but only those with a screen resolution less than an iPad Mini. These devices include the iPhone 5, 4S, 4 and 3GS. A different clue may be accounted for by the use of a full-size iPad, for instance. Some clues may only be visible on Android tablets – as many of them share screen resolution. In addition, some clues may be found through the use of browsers that support webkit, but not through others. A sample resolution chart was constructed.
Since many devices share resolutions and browser capabilities, there will be some overlap on devices that display the clues. One common denominator in the entire puzzle is the database integration that will require users to enter the correct answer to the riddle in order to move on. A running scoreboard will be on display during the puzzle to see which groups are in the lead.
We hope that this project will aid in the understanding of media queries, how they are constructed, and how different content may appear on different screens – or perhaps not at all. This project has been very much a group effort. Each of us took on our own task, or two – and many aspects of the project including coding were undertaken by us all individually and combined for the final site.