Good Flowerpot

Ugly Little Shop of Horrors Flowerpot

Reflection on CSS Flowerpots

Through perseverance and persistence I finally finished the HTML/CSS exercises before tackling the Flowerpot assignment. Writing code doesn’t seem to be my strong point; it feels out of my realm. But, I just keep trying until I obtain the required results. With the help and support of fellow students, Dave and Carrie, my flowerpots share some of their ideas as well as my own. Working with my highlighted Castro book in front of me, I began reshaping the style sheets to my needs.

I started with the good flowerpot. I wanted this page to appeal to an environmentally conscious audience between the ages of thirty-to-fifty. I felt it needed to give a clean, bright, view of nature, which is why I chose my daisy photo for the background. I wanted the information in each section to fall in the optimal readability and scan-ability area for the human eye as Lynch and Horton discuss in chapter seven (193). I kept in mind the graphic design principles of Gestalt— proximity, similarity, continuity and closure explained by Lynch and Horton (180). I added space around the text boxes and around the text within the boxes to improve clarity and readability and “avoid crowding the edges of the browser window” (Lynch and Horton 186).

After many hours of trial and error I finally understand how to get space around the borders and space around the text to promote readability. It took forever to get the second text box to have a background. I couldn’t figure out why it wouldn’t show up. Then after systematic adjustments to margins, ems, and background position I discovered there was a semicolon missing in my code! After I added the semicolon, the background finally appeared in the bottom box. Even though I’d been re-reading Castro, who reminds the reader continually to make sure you end with a semicolon, I had missed one (132). I sat in front of my computer at 1 o’clock in the morning laughing at myself. After hours of trial and error it came down to one missing semicolon.

The background I made slightly translucent so the photo just barely seeps through to add depth to the page. I used the softening affect of Carrie’s rounded corners on the three horizontal blocks of type, but let the sidebar keep the sharp corners to emphasis its distinct position and shape. I chose a bright dark-green for the borders and type to give contrast to the translucent beige background that mimics some of the grasses in the photo and again promotes readability. The bright yellow and white of the sporadic daisies give vitality, and depth to the page, and add an intimate view of nature.

I had a lot of fun creating the ugly flowerpot. When I started searching for the perfect gif, I found the “Little Shop Horrors” daisy. As the energetic, obnoxious, background image, it conveys a very different environmental message. It could be viewed one of two ways. First as anti-environment or it could be viewed as a site from nature’s point of view speaking against pesticides and fertilizer that kill certain plants and amphibians. Frogs are one of those amphibians that are endangered. For my purposes I believe it does convey an ugly web design, too busy, too many colors, crowding of images and text, which hinders readability.

I love frogs, so, I included them in this ugly “Little Shop of Horrors” flowerpot. The frog at the computer represents me creating cascading style sheets with many, many trials and errors. The frogs at the bottom represent my finding the right combination of ems/pxs, margins, and padding to get the text blocks in the correct positions. Every time I re-read Castro one of her tips, such as “an em is equal to the size of the font,” turns on another light bulb for me (157).

This ugly “little shop of horrors” flowerpot would probably not appeal to the scholarly or business audience because of its flash, punk, color scheme. I think it might appeal to younger teens to 20’s group even though parts of it are almost obscured by images and flashing daisies, and the horizontal text boxes are very long, hindering readability. And as I said earlier, it could be used for an environmental message from the plants and animals point of view that would appeal to a younger audience. But, because this page lacks the distinct structural and visual logic that a cascading style sheet should have it does not work (Lynch and Horton 207). It is not a credible environmental page, it is too playful, difficult to read, and not a serious representation of nature. It is the antithesis of the good flowerpot.

The good flowerpot on the other hand, would appeal to most ages and groups because it has a structural and visual logic in its three distinct text boxes, and can be quickly scanned. I chose two sans-serif fonts for the headers, Chalkboard and Tahoma, and a serif font, Baskerville, for the text body, which according to Lynch and Horton adds to the universal usability, as well as readability (218). The one drawback is that the high-resolution photo takes a few seconds to load. But, the clarity of the photo is important for the integrity as an environmental page with daisies and greenery.

I have learned much by creating these two distinct flowerpot pages. Simply by trial and error lessons are learned, light bulbs turned on, and inspiration sparked. The reading of Elizabeth Castro’s Visual Quick Start Guide and Patrick Lynch and Sarah Horton’s Web Style Guide were invaluable with their succinct, informative instructions and encouragements.  Also, the reading and exploring of The Zen of CSS Design by Dave Shea and Molly Holzschlag illustrated to me how valuable the web can be as instrument of instruction.

Works Cited

Castro, Elizabeth. Visual Quick Start Guide HTML, XHTML & CSS 6th Ed. Berkeley: Peachpit, 2007. Print.

Lynch, Patrick J. and Sarah Horton. Web Style Guide: Basic Design Principals for            Creating Web Sites 3rd Ed. New Haven: Yale University Press, 2008. Print.

Advertisements