Project Overview

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.

Meeting minutes 13th March

Minutes from the lst meeting :

Serena did an amazing job on the web page. We decided each to take a group of devices based on a pixel graphic. So here is the list :

Chris- Iphone 4 and 4S

Will -iphone 5

Jacky – Nexus 7

Findo – New ipad

Serena- iMac

Ming – ipad 2 & mini ipad

When everyone is finished with their riddles and coding for their section they should paste it here.


March 8th 2013

1. layout

2.  hints 

a-iphone 4s – We first met Siri

b-iphone 4 – This changes everything again

c-Android – galaxy

d-iphone 5 – the lightest iphone ever

L-blackberries – logo

e-Nexus 7 – google play

f-new ipad – retina display tablet

k-ipad mini – every inch an ipad


-Macbook – (browser)

-iMac – (browser)

-Windows – (browser)



– IE – (none) bonus

– Opera – an opera house

g– Firefox – a red fox

– Google chrome – a browser logo with combination of red yellow green and blue

– Safari – compass


riddles  (the answer must be words or number)

(riddles are not related to clues)

15 riddles at least


3. set several group user names 

input username

input answer

show the result of right answer amount

4. we can see the whole process of this game (like a sitemap) only on IE brower

it is considered as the homepage.


Great Meeting Today!

Absent : Will (Sick)

  • Some thoughts on the Responsive Web Design [Riddle game]
  • List of Devices and Browsers
  • Found Things we can use in this Riddle game at Alison House
  • Started HTML and CSS coding in the google doc.

For this Friday,

Everyone should check the codes in the google doc and think how we can use it in this Riddle Game. Feel Free to change it and adding more codes.

March 4th

No one is absent!

Discuss our thought of first submission mark and the coming submission.

  • We should figure out a creative way in presentation.
  • Actual work is the most important  for the marks.
  • Documentation like photos and videos, as Matin introduced in the second DMSP lecture, should be recorded.
Jacky came up with an new idea.
1\set 6 points in or around Alison house.
2\one person at every point holding an device
3\users use the information on the devices to find out the next one
4\the person who first finish the whole game, he/she win.
For Wednesday.
We need to figure out what content in our website and the way to present it.