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?
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 😊
