Coding Exercise: Responsive Environment

My first responsive coding exercise was a simple graphic storytelling. I called it “Responsive Environment”. The idea was that the landscape would change as the screen size expands or contracts. From the smallest frame, it starts off as a tiny island, and by the largest frame it has grown into a civilization.

Give it a try! → DEMO

(resize browser to see responsive effect)

Process

Usually, responsive web is to accommodate mobile screens. Because I was having fun with this exercise just to learn how to write it up, I explored using it for a different purpose. Interactive websites are entertaining, and I wanted this project to be just that, but with some storytelling sequence.

When I moved on to the process of executing it, I came across some challenges. What kind of style will I illustrate in? What style would suit this interaction the best? How can I make the graphic transitions seamless? How will I incorporate the images into the code since it’s my first time?

A screenshot of my code

I broke down each image size in order and set a minimum and maximum width so that each image would only appear within a certain window size. Below is how I created each frame:

And here is the final image of the island!

Give it a try! → DEMO

(resize browser to see responsive effect)

Thanks for reading — hope you enjoyed it! Feedback is welcome, feel free to leave a comment or get in touch hello@tracycai.me 😊