Try It

https://networked-media.inthecreat.ing/project1/

Overview

One of the supurises to me when comming to the US is how people still got their mailboxes. Though it's used mostly for bank letters and advertisements, the continuing existance of physical mail still felt out of place in the world of digital communication. 

For this project, I hope to recreate the experience of receiving meaningful physical mail (not ads or bank statements) in your mailbox in a digial form. So I created this web experience using vanilla HTML, CSS and JavaScript, with minor code on the backend and very minial styling.

Inspiration

One major inspiration was my trip to Norway and Iceland this summer. I found that physical postcards were still sold at gift shops everywhere, despite most people simply share photos of their trip on social media. So I wondered, what is it like to receive physical postcards from friends? Can this experience be somewhat recreated in the digital space, and more specifically, on the web.

I want to theme this project based on my Iceland trip, so each of the letters/postcards “sent” to you in this digital space is related to what I saw and experienced in Iceland, just as if I sent them during my trip.

I decided to go with a black and white minimal style because I think websites today are just over-styled and over-colored. A clear evidence is how all the AI agents trained with data on the internet always make User Interfaces with a blue-purple gradient, because many websites created by human are like that, and many even found it to be attractive. However, I want to pursue the opposite extreme—an interface with no color or distractions that users can focus on the content. This is not a practical approach commercially, but this is not a commercial project anyways.

Process

I started by thinking about the elements of physical mail and how I could recreate them in the digital space. A major one is the sender and recipient addresses, which is crucial for mail to be delivered to the right person. Similarly, we use IP addresses to deliver information to the correct destination, so I thought of replacing the address on letters and postcards with the IP addresses of the sender (my server) and the recipient (the user).

To achieve this, I wrote a simple backend API that obtains the user’s IP address through the request’s headers, and uses a free IP to geolocation database and library to check for the city and country that the IP address is located. The server then phrase these data in JSON format and send as the response. On the frontend, I use the JavaScript fetch() function to all the API and obtain these data so that they can be displayed on the webpage.

Then, I started to create a visual similar to stack of envelopes—when you open it the lid will flip upwards. This visual and interaction is key to the project and I wanted to create it entirely using HTML and CSS, rather than using images. So I created 5 envelope outlines that stack on top of each other, each with a sealed lid. When the user’s cursor hovers on each envelope, it will pop up a little and switch from just a white outline to a white fill. And envelops that are opened will turn gray and have the lid flipped upwards.

There's a total of 5 envelopes, leading to 3 letters and 2 postcards, each about a day on my trip. For the letters, I created a layout similar to a physical letter—with the sender and recipient addresses (in this case IP addresses) on the top and the content below them. For the postcard, I created a flip-over hover animation using CSS, recreating the feel of flipping over a physical postcard and seeing the message on it.

References/Technologies Used

• All photos and text content are original
• All graphic elements are original
• The IP address API uses a free IP geolocation database and library from https://www.ip2location.com
• No generative AI is used in the creation of this project