Coding Exercise: Responsive Environment

Tracy Cai
Tracy Cai
Jul 22, 2017 · 2 min read

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 😊

Tracy Cai

Written by

Tracy Cai

Incoming UX Designer at LinkedIn — tracycai.com 🎈

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade