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.
3 comments
Comments feed for this article
July 27, 2010 at 5:28 pm
frostywit
Hi Pam,
I’m really like what you’ve done with your ugly flowerpot. I think that it’s perfect that it takes so long to load. That’s a great goal in creating a horrendous site and it tells me I need to add more GIFs to my page! 🙂
I really like the theme you have going with your nice flowerpot as well. I almost feel Zen-like just looking at the soothing tones, soft curves, and easy presentation. It’s funny, I say “easy presentation” and it must have been anything but easy!
I do have one minor criticism, and it could just be my browser. Your daisy background, while beautiful, is not as crisp and clean as the rest of the page. I think the low resolution of the image is more noticeable now than it would have been five or ten years ago because everything is in HD now (I am not using an HD screen at work either). The background looks slightly blurry/grainy. It is not a huge detractor from the beautiful lines, colors, and general readability but it is noticeable.
For your reflection, I emailed you at emich with some very minor proofing concerns. The issue your essay has is actually something I wish I could do in my own writing. You are a very articulate, thoughtful, and concise writer. What takes me five words to say you can say in two. While that is not normally a problem, it must be difficult for you to stretch 600 well thought out words into 1,000. I may have offered suggestions in the Word document I sent, but in case I forgot, here are some things you could do:
1) Look at any paragraphs you have that introduce two distinct ideas/concepts and break them into two paragraphs and expound upon each idea/concept individually in the separate paragraphs.
2) Leaf through the textbooks for major design features and surprise yourself with things you may not have noticed you did right… Okay, that doesn’t make sense. Basically, look for some quotes in the textbooks to sprinkle throughout the essay that support ideas you’ve presented.
3) Ramble. It works every time. Just ramble incoherently for a page or so.
I hope something I said in there makes sense and helps you. All in all, you’ve done a really great job!
-Josh
July 28, 2010 at 1:00 pm
clluke
Pam–
I think your essay is great! You justify your choices well, and your prose is very thoughtful. You might consider switching the paragraphs that begin “After many hours…” and “I started with the good flowerpot…”, since the part about the semicolon happened when you were working on your good flowerpot, right? I think you could also explain more explicitly what makes the ugly pot so ugly (too much movement, wild colors, etc.), because it would allow you to engage with the material even more as well as help back up your point about the ugly pot being the antithesis of your good one. Does that make sense?
Two quick suggestions on the good flowerpot design:
– there might be too much space between the different elements. You could probably tighten it up a bit while still keeping it fairly airy and readable, and
– could you make your blockquote a bit bigger and noticeable? It really gets lost at the bottom.
And your ugly flowerpot is downright scary. The daisies: yikes! And the frogs: very cute and wonderfully distracting. Well done!
Let me know if I can give you any more feedback or if you have any specific questions as you’re polishing things up. I’ll see you tonight! 🙂
July 28, 2010 at 10:09 pm
frostywit
Wow! I really like the changes you’ve made. First, the background image is much cleaner and crisper. The cacti-like plants seem to say that the whole process can be a bit “prickly” while the flowers remind us that it is worth it. This is particularly highlighted by the sharp-cornered box that covers them while the softer corners lay over daisies.
I think you’ve done a great job with your reflective essay as well. You’ve created a great mix between personal experiences with the project and your academic observations.
I think you did a great job – now head over to my blog and tell me what I need to fix! 🙂