Designing Responsive Websites: The Game!

December 20th, 2016

Filed under: Game Development Web Development

This is a game design for the course I mentioned in my piece on Magical Drop III, made as the final project. The goal was to implement what was discussed in a designed-from-scratch gamified learning activity. The course is only a week long (actually more of a workshop) so the design didn’t have to actually be implemented, just drafted. This design is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License, for those curious about using the design to make something.

The Goal

“You’re a worker in a website factory that ships sites in any size the user orders! To get sites to ship they must be designed so they have all the parts they come with and don’t have any overlapping elements, while fitting snugly in your reference boxes. Ship your given sites in all your reference box sizes to end your shift, completing the game!”

The main idea for the activity is to learn responsive web design best practices in an environment with explicit visual feedback, guidelines for those practices, and an easy-to-grasp metaphor to better visualize what designing for screens of varying sizes feels like (putting square peg into square hole).

Game Flow

  1. Students will be given a sample site to start with, along with their five reference boxes, each analogous to a typical screen-width breakpoint. The biggest box will be used first for shipment. They will also be given a set of user-ordered restrictions (only use this CSS property, have this many elements in the page, etc.).

  2. Knowing this information, the student submits the site for approval, visually shown as a paper document (their site) being conveyored through a scanner then lowered into their first box.

  3. If it passes the scan and fits the box, the box closes and is stamped “READY!” and goes down the conveyor belt. If it doesn’t pass either one, a “foreman” (me) gives a tip to the student about why it didn’t work, be it site content overflowing over the boundaries, site content overlapping on the page, whatever the problem might be. After some editing of the site code, the student can try again.

  4. When a box successfully ships, their CSS is cleared before coding for the next box. Once the student ships all five boxes, they are given their next site, with new site content and new user-ordered restrictions, more advanced to implement than the first site.

  5. Their shift (and game) ends after three sites are shipped. The time taken to completely ship each box (and afterward, each site) is recorded for replayability, in case the student wants to go for a faster time. This can also help reinforce the practices learned through prepping the site for shipment.

  6. Once all three sites are shipped the foreman will congratulate them on a job well done, and the game ends.

“Overtime” can be chosen for extra credit, in which the student will be able to work on two additional sites, both more challenging than the first three.

Feedback

When the user begins to ship each box, an animation shows their document going through a scanner (to check for correct site content behind the scenes), then slowly lowering into the box (to check for size). It will stop with red alarm lights for a second or two if the site fails the scanner or is too wide, or it will proceed with green lights if it succeeds. Simple two-color code for “correct” and “needs revision”.

If a shipment needs revision, a foreman will come out to point out what the scanner or box wasn’t accepting. The foreman will be careful not to give away the solution, but to point students in the right direction so they can apply what they learned during the course for solving responsive web design problems.

Rewards

Correct shipments are rewarded with “Great job!” messages and a green light accompanied by a “Correct!” ding. Correct shipments also show the student that the technique they applied was the right one to go with to solve the problem in front of them.

No need for points as the gameplay and what’s learned are supposed to be their own reward, as described in this excellent post on game dynamics by Philip Trippenbach.

Rules

  • The student can’t move on to the next box until they ship the one they are on.
  • No copy-pasting from outside sources! As soon as the game loses focus it will clear the clipboard.
  • No elements in ship-ready sites can overlap, unless specified by the user-ordered restrictions.
  • All user-ordered restrictions must be met before the document can go through the scanner without error.
  • Additionally, all site content must be contained within the bounds of each box, otherwise it will be rejected and require further tweaking.

What’s the win-state?

Once all three sites are shipped completely, the game is won. The foreman will appear and congratulate the player, showing them the times they got for each one. The play will then be presented with the option to go into Overtime, start again, or quit the game.

Afterword

There’s of course a ton more that could be added (specifics of media queries, flexbox, Grid, JS solutions) but I wanted to keep things basic, such that the student can learn and not be overwhelmed.

What would you add? Would there be specifics of web design you feel should be focused on more in a game like this? If you have any thoughts/critiques/praise, feel free to sound off in the comments below! I always appreciate feedback and chances to improve.