*** From the Archives ***
This article is from December 28, 2000, and is no longer current.
Great Sites: Holocaust Memories Live in Media-Rich Site
This site doesn’t sell or advertise anything. It doesn’t ask you to register or fill out a survey. It will probably never be updated, and yet it will never be outdated. It is a site that exists solely for the presentation of its content. What a concept.
The site is entitled Do You Remember When, which is the title of the Holocaust artifact featured within. It’s a book given by one young man, killed at Auschwitz, to another young man, a half Jew who survived in the small Jewish underground of World War II Berlin and is alive today. The book itself, a notebook of sketches and observations exchanged between friends, is unremarkable. It has none of the poetry or personal insights of the Diaries of Anne Frank, for instance. Yet its existence as an historical document gives the little notebook a power disproportionate to the personal document it is.
The United States Holocaust Memorial Museum in Washington, DC, exists to remind us of the evil that the Nazis unleashed upon Europe over half a century ago. Among the museum’s collection of mementos is this recently donated notebook.
The site, one of the museum’s online exhibitions, is as compact as the book itself. It opens with an introduction, which begins: “What was it like to live as a young Jew in Berlin during the Nazi deportations?” The text is set in Courier, as if typed on paper that has yellowed with age. This window contains a single GIF image.
Under the introduction window is another window with the book itself pictured at what appears to be actual size.
We are not only presented with the cover of the book, but the cover page of the site, as well.
No Explanation Necessary
In one sense, this book speaks for itself. We see the handwriting in German or can point to the Translation button (set in a handwritten script typeface) to see the text translated into English.
This rollover is implemented as a layer using the absolute positioning capabilities of Cascading Style Sheets and the <DIV> tag to achieve the appearance of a transparent image popping up over the existing image.
Similar to viewing this book in a museum exhibition, the book itself is the central element and, surrounding the text, a thorough explanation of the events. We get both the seen and unseen, the events transpiring in Berlin as the book was written, on a single HTML page.
The collage-like pages of the site comprise what are probably single images that could have been composed in Photoshop and then sliced up for display as HTML tables, as you can see in this screen shot taken in Adobe GoLive.
When viewed in a browser window, the homogeneous composition of the page is apparent, while the sliced images allow the site’s designers to add interactive features.
The Ideal e-Book
The advantage of displaying this book as a Web site is evident when you start to turn the pages. You can examine all 17 pages, and each one is translated and annotated to put it in its proper context. The navigation scheme allows you to browse forward and back, or you can choose any page from the pop-up display across the top.
Reading the notebook, it’s as if were reading an e-book online, so there’s no need for any kind of hierarchical navigation. There is, however, a hierarchy of information being presented.
On each page, some of the text is highlighted — emboldened, enlarged, with a contrasting rectangle of color underneath. These are areas where an image map has been defined to link to additional information. This tangential material is always presented in a new window.
In the example pictured here, you see the text of an audio file, which is an excerpt from an interview with Gad Beck.
The illustration above shows the transcript of an audio file, which is a recording of a portion of an interview with Gad Beck — the recipient and later the donor of the book. In the background is a picture of the young Beck in Berlin at the time the book was written and a picture of him today. The audio of an interview with Beck is difficult to understand, but just the sound of the old man’s voice, full of emotion for his long-gone friend, has the effect of making the words jump off the page.
This is a particularly effective use of the medium of the Web. So many sites, simply because they can include sound, are gratuitously noisy. In this case, the sound adds to our experience, making this book that we can only see and not hold more real. And by doing this, it makes the terrifying circumstances more immediate, as well.
Design Elements Used Well
I can imagine that some browsers will complain about the colored GIF text on colored backgrounds on every page of this site. I agree that often this is a mistake, especially for a site that depends so heavily on textual content. But here the color contrasts are carefully specified so that the text is always completely readable.
Another potential criticism might be the heavy reliance on graphics, which can make the pages slow to load. In fact, every page relies completely on sliced images. There is no HTML text, and pretty much every cell of the pages’ tables is filled with image slices. The compromise is that the window size is relatively small — 714 by 418 pixels — and that once the page is loaded, the rollover images are pre-loaded and work instantaneously.
In fact, the site does not feel slow, bloated, or overly dependent on images. It’s easy to understand the navigational options and to read straight through the book following the exhibit. More importantly, each HTML-based decision has been made in a way that enhances the goal of the site — to present this personal account of a friendship in the context of Jewish life in Nazi Berlin. It is a powerful use of technology, specifically of Web technology and design, to expand the limits of human experience. This little site is more than a display case for a World War II artifact. It is a window that lets us pass through to and nearly touch the tragic face of history.
Read more by Clay Andres.
 |
I enjoyed this article because it gave a detailed account of how the webpage was designed. It explained what software was used and how it was used effectively.