A Memoir

Reflection on Print-to-Web Assignment

For this assignment I used my literacy memoir, “The bolshevik Princess,” written for ENGL 515. I chose it because it includes a couple poems, an excerpt from a written exam, and an excerpt from my children’s story. It covers the period when I was growing up in the fifties and sixties; the television shows I watched, the children’s books I read to my sister, and my favorite fairy tale. The television shows and books were conducive to a sidebar for referencing while readers read the main text.

I divided the text into nine sections, an introduction, Growing up in the 50’s and 60’s, poem “Austin Road House,” Creativity, excerpt from Frog Crossing, Inspired by Shakespeare and Graham, Women Writers, block-quote from question 3a, and the poem Katharsis. It is a long page, but for a memoir I felt needed the continuity of scrolling. As Lynch and Horton explain “usability studies have shown that web readers certainly do scroll through web content that interests them” (189). Twenty-first century web users are much more savvy. With the main text on the left and the sidebar at the right readers can easily scroll and click on whatever they are curious about.  By keeping the design simple with only two elements, the main text and the sidebar I’m insuring universal usability.

I was inspired by the Zen Garden example “Withering Beauty,” which has a black background with light colored type and images. The feeling is very dramatic, which is what I wanted for conveying the word bolshevik. I used two shades of pink to acknowledge the “Princess” aspect of my piece, a hot pink and a light pink, which on the black background promotes readability, as well as giving good contrast. Contrast is one of the four aspects of good wed design called CRAP or CARP whichever, says Dustin Wax. I tried to keep in mind those four principles contrast, repetition, alignment, and proximity for my memoir. I use contrast and repetition with the colors and font for the headers. I use alignment and proximity by placing the sidebar images across from the text that refers to them. The television shows take up the most space, but the reader can pick and choose which to click on and explore. The books, authors, and reference images I also placed so they would show up on the screen with text. As Mike Rundle comments these principles of C.A.R.P. are a “good way to check your design work,” and I kept them in mind as I put together this web page.

In converting the text to simple HTML I referred to my highlighted Castro book. The alignment and spacing of the poetry was my biggest challenge. It took me forever to get all the margins and breaks where I wanted them. I had to tweak the line height as well as the padding (Castro 174-177). I know there are still areas that need to be adjusted but time was running out. The other huge problem was getting the sidebar to the correct position at the top right of the page. I first tried putting all the jpegs and links in the HTML but wasn’t using the correct code formula so it didn’t work. I put them all in the CSS and got them to show up but not in the correct spot. Then, I referred back to exercise 11 and realized I had used the wrong code so I re-setup the jpegs and links in the HTML and the sidebar finally was in a vertical row. But it wasn’t until I realized all I needed was position “top” and position “absolute” that I got the sidebar into the upper right corner (Castro 179).

Once I got the sidebar working I began to perfect the images and links. I added coding to the CSS so the links change color after they have been visited. My biggest frustration has been the link for Virginia Woolf. I cannot for the life of me figure out why the link is not showing up as a link. I checked the code it matches all the other links. I even went in and changed the link and it still does not work. I guess I will have to just let it go for now. I know it is not a semicolon! Oh well indeed. It may not have been a semicolon but it was a quote that was missing from the code.  Through the peer reviews and usability testing I was given helpful suggestions and answers to that nagging problem. Thank you Dave.

I changed the main text color for easier reading, but I left the poems the hot pink for more contrast. I added coding to the links so they open in a new window for easier navigation back to the main page. I thought about adding buttons to the top of the page that would take you to each heading, but chose not to because of time restraints. I envisioned major margin problems adding them to the top of the page. I may add a return to top button at the bottom of the page when I get all the other essays written for this class.

I have to say this has been a fun filled adventure. I loved finding the YouTube or Wikipedia pages that were just what I envisioned each time I initiated a search.  It is amazing what you can find on the World Wide Web with just the click of a button. Reading Shea and Hozschlag’s The Zen of CSS Design I learned how the World Wide Web Consortium (W3C) helped to bring about the standardization practices so web designers, even novices like me, can be fairly sure my page will be viewable by most browsers (11). As I’m writing, revising, and tweaking the HTML/CSS code for my print-to-web page and finishing this essay my mind is swirling. There are so many more things I would like to do to the page. For instance add an embedded image of the house referred to in the poem similar to the image in “Withering Beauty,” but there comes a time when you have to say enough is enough and call it quits.

Works Cited

Castro, Elizabeth. HTML, XHTML & CSS Sixth Edition: Visual Quickstart Guide. Berkeley:

Peachpit Press, 2007. Print.

Lynch, Patrick J. and Sarah Horton. Web Style Guide: Basic Design Principles for Creating Web

Sites 3rd Ed. New Haven: Yale University Press, 2008. Print.

Shea, Dave. and Molly E. Holzschlag. The Zen of CSS Design: Visual Enlightenment for the

Web. Berkeley: Peachpit, 2005. Print.

Wax, Dustin. “Design Better with CRAP.” 30 July 2007. Stepcase Lifehack. Web. 7 August

2010.

Rundle, Mike. “How C.R.A.P. is Your Site Design?” 10 April 2006 Think Vitamin. Web. 7

August 2010.