By 18 April 00:00 GMT

1. Empty answer box when page is refreshed – Serena

2. Re-style results page (make pretty, colour indication) – Findo, Ming

3. Improve riddles
-Spot the Difference – Will and Jacky
-Words/Letters (Better instructions) – Findo

4. Write Up
-Until Now – Will (+Serena for Code)
-Finish – Christin

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.


27th February

Fantastic Meeting Today!

No one is absent!

  • Everyone were giving their thoughts on the feedback of the 1st submission. (There was probably miscommunication and misunderstanding within the group , however this was solved and everyone has already joined Facebook group for this DMSP course. To prevent any miscommunications in the future. )
  • We spent most of the time on brainstorming and many great ideas on presentation of and final submission were emerged.

  • We all felt really happy about this new idea  (we called it “Riddle” at the moment), not only it is strongly related the idea of a “Responsive” Web Design and also a very interesting approach by adopting each different devices to play this “Riddle” game.  It is hard to explain the whole concept of this “Riddle” game on the post, We can’t wait to talk about this to you (Amy) on Monday.

For next week:

The “Riddle” idea isn’t completed yet, everyone is being told to do some brainstorming after the meeting. Bring their additional ideas to the next meeting, and most importantly we would like to hear the feedback from Amy on monday 🙂

January 30

Good meeting today, all!

Absent: Christin (Sick)

  • Mobile-first development is key. Start with the simplest, most basic mobile version and build on it with media queries.
  • Some mobile devices do not understand media queries, so making the mobile version the first code that displays.
  • CSS hierarchy is important.
  • Use classes, not IDs.

Some responsive sites:

For next week:

A draft of a .NET magazine-style article for our first submission.

  • Will: Responsive Media (Media Queries included.)
  • Findo: Responsive vs. Mobile Sites (Focus on BBC)
  • Serena: User Experience (Focus on Human Interface: Touch, etc.)
  • Jacky: Accessibility
  • Ming: Responsive Layout (Fluid Grids)
  • Christin: Pro Tips on HTML5 and CSS3/4, What’s Good/Bad/Works/Doesn’t Work. Pick 3-6 keys and elaborate. (, etc.)

Remember, the key is that pages scale UP to desktop, not DOWN to mobile.

Meeting Minutes on 23th Jan

  1. We have a regular meeting at 3 pm every Wednesday at Room 5.02 in the Informatics Forum.
  2. Things to do for this week:

(1)  Watch related tutorials then build a simple responsive web and place it on            playground

(2)  We’ve decided that for the first submission we will examine existing responsive/adaptive websites. Next week we can bring the best web examples to our team and discuss individual responsibilities to analyze the website which is going to be chosen from the good examples.

3. We can post on blog that what we have done this week about creating the website and what have we learnt about the techniques to build them, etc. (We can also link the tutorial)

4. Think about what we are going to do at last.

5. We have 10% mark are valued by our attendance of group meetings.

6. Remember to do the reading and we can borrow books and magazines from lovely Amy.

7. During Innovation week (18th-22th Feb) we’re welcome to join the Smart Data Hack