beep

Dynamic Web Content Viewer

Team

Lisa Imas

Timeframe

Two weeks

My roles

Designer, coder

Project Conception

One of the most frustrating things for me as a designer/coder/artist is that it's always a struggle to find a good way to display my work. Between having to display images, applets, video, and text and having to keep a consistent way to show them all, it's nearly impossible! Eventually, I grew fed up with trying to work with existing frameworks like Lightbox and decided to build my own.

I wanted this "web displayer" to be very simple, to allow for the greatest possible range of work to be shown--no limitations whatsoever and fully customizeable!

However, I also wanted it to be very simple on the user's end too. Coming from more of an artistic background than a coding one, there was a time when I found HTML very complex and wanted to keep things as easy as possible to avoid confusing myself, and I know plenty of people who are in that position right now.

Another big goal for this project was to arrange the rows of thumbnails in an aesthetically pleasing way. Rows of thumbnails have always bothered me, because usually there will be, for example, two rows of seven thumbnails, and then a third row of two. It looks uneven and sloppy, when they could definitely be more evenly distributed--so why NOT make it more evenly distributed?

Implementation

So, I wrote a Javascript program that would do all of these things! To solve the rows of thumbnails problem, I wrote some code that would find how many thumbnails can fit into a row. The script measures how many thumbnails it can fit into the window width and then calculates the best arrangement of rows based on the window width and how many thumbnails there are. And because the script updates the thumbnails when the window size changes, the result is a dynamic optimization of thumbnail rows that look neat, organized, and even!

I also wrote this flexibly, so that any CSS could be written to affect the content and the script would still work. The thumbnails can be any dimension, with any margins between them and any styling.

Similarly, the accompanying HTML for this is very simple and easy to change! All that's needed are two things--a div with the id "containingThumbs" and a div with the id "content." In "containingThumbs", there is a series of divs, each containing whatever the user wants the thumbnail to be. In "content", there is a series of divs in the same order as the thumbnails, showing the content they want associated with each thumbnail. From there, it's as easy (or complex) to build as you want!

Interactive Prototype

To see some bare-bones examples with more thumbnails, feel free to click here and resize the window and click around.