Submission 2

Initial Planning, Conception and Justification of Decisions

We began our second submission with the mark from submission one clearly in our memories. Due to the fact that feedback stated “the deepest understanding…can only really come from experimenting with code,” we made sure our second submission was code intensive.

We decided that the best way to show device specific nature of responsive design would be a device-specific interactive game. We envisioned a puzzle-like riddle that allows a community of mobile gadgets to solve it. We wanted to create a non-linear set of problems that could only be solved from start to finish with a multitude of devices.

We met and developed a plan for the project. We decided that 6 different media queries/device ranges would be optimal, due to the fact that users’ attention and ability may vary. We aimed to keep them interested.


The Design Process including Early User Testing

From the beginning, a six-block web page structure was developed. Each block represents a different media queries’ range of devices based on the device-height or device-width property.

We began with a list of potential devices ranges in which to focus. We chose some of the most readily available and most used devices on the market. Various iOS and Android devices and common laptop and desktop sizes were used to allow for the highest number of participants.

From here, each group member chose a particular device range for riddle development. Due to our specific ranges and potential devices, specific riddles and mini games were developed using CSS and JavaScript. Each of us were required to research the individual capabilities.

A very simple example would be: large image-based riddles would not be used as riddles on smaller screened devices & and touch-based games would not be developed for a laptop.

From there, the page was developed in block form. Six blocks were created on top of each other via HTML/CSS. Each block was connected to a media query with a specific range of device sizes.

When a device from a specific range opens our website (located at, a specific block and riddle is displayed. Upon successful completion of the riddle by entering the team number, answer and clicking ‘submit’, the user continues on to another device until all six riddles have been completed.


The presentation of the project was an event open to all students and friends to join a friendly ‘Riddle Hunt’. As it took place just after Easter we decided to give out chocolate Easter eggs to the first ten successful hunters. People that joined the event could participate as a group or individuals, and sharing their devices was something we were hoping for, as we initially thought that this hunt could be used in a social manner of bringing people together. People that came to the launch were very enthusiastic and happy to participate, and their encouragement was enhanced by the chocolate threats as rewards. While playing students from different majors worked in groups or exchanged answers and hints with other participants, which we thought of as a great success.

Since only the first ten participants were rewarded, we decided to place a results page on a big screen that would automatically update the current position of each player/s. This also served as a way for the ‘hunters’ to see if they have answered correctly a question and how many they have left till the hunt is over and they can claim their reward. This brought up the competitive side of the game when players could see not only their own progress, but also the one of other participants. While launching ‘Riddle Hunt’ and looking at the results page in action we discovered an interesting component of the game, which we haven’t thought of before. While participants would need to enter the same team name each time they answered a question in order for the system to recognize them and add their correct answers, they could also quickly change the answer of a particular question of another participant, in order to surpass them and be successful. We thought that is a great way to bring out the competitiveness in players and decided not to change the results system after the initial presentation.

Overall we consider the presentation as a successful one, with more that 4 participants winning a price and indicating that they have enjoyed themselves. Players not only played a game as individuals, but they also socialized between teams, and at the end even shared the rewards they won.

Post-presentation work

After the presentation we had an immediate meeting as group to discuss its outcomes, reflect on the responses we had and the technology issues we’ve encountered during the launch.

We decided to adjust and fix some of the problem that participants in the presentation brought to our attention.

The work was divided as follows:

One of our biggest focus points was the results page. Although the alpha form that was projected on a screen during the presentation was designed to match the Easter theme of the rewards, it proved to be less efficient in effectively showing to participant their progress. Therefore we decided that it needed to be the first improvement and change the way that players view their answers (a correct answer lights up in green, rather than the incorrect’s red). Another problem was that the results page design was not linked to that of the ‘Riddle Hunt’ posters, flyers and overall was lacking as part of the brand. By the time of the second submission the entire mentioned problem was fixed, and design was adjusted to the one of the posters.

While presenting the game we discovered that after an answer is submitted the answer box isn’t cleared, which could give an opportunity for players sharing devices to use one another’s answers. The beta submission of the web page would have the problem fixed, alongside with two of the riddles, which proved to be difficult for the players and/or being presented in an unclear manner.

Testing Procedures and Outcomes

There have been multiple iterations of our project due to development issues with our code. Procedurally, each time our code was changed we tested the functionality on as many applicable devices as possible. Our initial outcome was a lack of exclusions on our media query leading to the entirety of our blocks being displayed on devices outside of our queries.

We remedied this by a more comprehensive approach of restructuring our media queries. Making sure that our device ranges were listed in ascending order and that there were no gaps between devices was the key to our further development. By the time of our presentation, much of our desired functionality was working. Feedback was taken and used to do some major revisions to our project.


Clear Description of Who Did What


  • Initial concept including general design and structuring
  • Individual riddle creation and coding
  • Code troubleshooting (with Amy’s assistance)
  • Group organization
  • Group assessment outline


  • Individual riddle creation and coding
  • Recording of the presentation
  • Writing of the second submission group write-up
  • Role as a presenter and guide to participants during the presentation


  • Individual riddle creation
  • Design and coding of the entire alpha page and fitting together the individual riddles and media queries
  • Post-presentation adjust of the main page to refresh and clean answers after submission
  • Code troubleshooting


  • Individual riddle creation and coding
  • Group organization
  • Revision and help with coding during the alpha stage
  • Post-presentation improvement of the ‘Spot the difference’ riddle
  • Purchase and move of  the page to a unique .com domain


  • Individual riddle creation
  • Organization of the presentation event – rewards
  • Group organization
  • Creating of custom flyers and posters for the presentation events
  • Post-presentation adjustment and coding of the results page to show colours according to correctness of answers


  • Individual riddle creation
  • Creation and coding of the alpha results page
  • Post-presentation further development of the results page
  • Organization of the presentation event – awards
  • Printing posters and decoration of Atrium on the presentation day


Additional photos from the presentation


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.


Use nth-of-type to design column

I’ve learnt using nth-of-type to design column and I’ve put my web page on playground under my folder
The web page looks like:
I firstly analyzed the code of a typical example of responsive web design:
The main points of this example are
  • using Media Query module
  • do not use absolute width
  • using relative font-size
  • using fluid grid
  • using fluid image
Here is the link of tutorial:
The nth-of-type means targeting every “nth” .col element, stating from the first column.
  • .grid4 .col:nth-of-type(4n+1) target every 4th .col element, starting from the first
  • .grid3 .col:nth-of-type(3n+1) target every 3rd .col element, starting from the first
  • .grid2 .col:nth-of-type(2n+1) target every 2th .col element, starting from the first

We need set the stylesheet for them and then consider how to change from 4-column layout to 3-column and how to change 4-column layout and 3-column layout to 2-column layout when the width of the web page changes. The code in the tutorial helps us solve this  problem. And the website of this tutorial is also responsive. ^_^


Useful links about grids system in responsive web design:

A simple and clear responsive web

The simple responsive web that I put in the playground is

The tutorial I read is

As talking in this tutorial, media queries are very important in making a responsive web.

During this experience, I met two problems. One is about the sentence “Sip to Main Content”, I don’t know why it does not appear in the tutorial’s example web. As the code writing in the html, I think it should appear.

Another is about the Head picture “Demo”. I think “Demo” is set as a background picture, so I make a new “Demo” picture by Photoshop, but I cannot put it in the right place, even though I adjust its size.

Things for this week

I’ve put my index and some supporting materials on playground under my folder

This simple web looks like:

The most import things I’ve learnt through these two tutorials are that the width needs to be set as percentage and we need to use media query as well and sometimes Jquery

There’re some bugs when I combined these two tutorial then Amy helped me a lot and the key thing is that we need to design the mobile view first and put media query at last… case some important codes may be overlapped by others…..Thank you Amy!

Here are the links of my two tutorials:

IMPORTANT: There’s a wrong point of the codes in first tutorial that is

  1. nav a#pull:after {
  2. ……
  3.         rightright: 15px;  (you need to delet one “right” here)

There’s another thing to notice that in the html, we need to put <script src=””></script> 

in order to use jquery and link js to make the effect…but actually…this is my guess and it worked but I don’t really know why it works…I’ll ask Amy about this.

Here are some other websites which I think may help us:




Simple isn’t so simple.

I started into building a “simple” responsive website and quickly discovered that such a thing doesn’t exist. The whole premise is straightforward, but the end product is never without complication. There are about 50 ways to do everything. Adaptive font sizes? Using em units works, but only on initial loads or page refreshes. JavaScript? Again, that works. But it’s clunky.

I tried to focus on essence of an adaptive website. The reason is exists in the first place. People access sites from many different devices, on different platforms, and with differing screen resolutions and pixel densities. With all of these things considered, what is the most important part of a website? Displaying the content in a way that makes the user able to navigate it and comprehend it.

So I just created a basic layout-swapping and adaptive-sizing page using a placeholder image and some dummy text. It’s not extravagant, nor is it beautiful; but it shows how media queries work and the basic principle behind adaptive sites.

If this was an elaborate, complete design, I would have used em units for everything because px units don’t convert directly on screens with various pixel densities.