I am happy to report that I didn’t have any CSS issues that forced me to change my design mockups. I did however make some changes to the design due to some comments from Jeremy and Trevor. I agree with Sharon that this has been the most challenging assignment so far. And though I wouldn’t call my product bulletproof, my CSS validates. The major changes include the header, footer and navigation.
- Header: I changed the logo to call more attention to the movie reel icon by making my black underline smaller. I spent a lot of time working with the gif transparency. I ended up with an okay product, but in the end I didn’t even need it.
- Footer: It was suggested that the navigation image of people listening to the radio was visually detracting from my primary navigation, but that it was a good image and should be used elsewhere. I decided to use it as the footer, covering the text that came with the image with my copyright info. I had a more trouble using this image as a transparency, particularly when it was larger. The image was also very tall and narrow for a footer. Then I realized I could cut and paste the wave images, widening the image considerably.
When I widened the image I felt that the overall design was too lose, and lacked geometrical appeal. I still feel this way, but I made what I believe is an improvement by making color blocks for the header and footer. I used a lighter image background for these because I also thought it was a little too dark.
- Navigation: I moved the navigation on the home page to inline navigation below the video essay image links. I spent a lot of time tweeking this and I am still not finished. I don’t really understand but I had to make the ul background wider than the content area for the background to go all the way across. I also adding a lot of padding the the li elements to make them sit on the background the way I wanted. I think I probably did this the hard way. I will probably look into an easier way when I move over to Omeka.
Since I feel like the design is flat, I tried a lot of gradient layers for the navigation bar background image and shadows and all kinds of things. They all looked terrible so I moved on. Also, it would look strange for one lone element to have texture or color fading styles when nothing else does.
Conclusion: I really learned a lot. I found making changes addictive and actually pretty fun. I know where top, right, bottom, and left are. I spent over an hour trying to right align the ‘download script’ link with an inline a element and fixed positioning and finally used a span with left padding. It worked.
I don’t think my site really looks like a professional site, it is flat and pretty over-simplified. But I think I got a lot done, with just a little bit of knowledge and it is very encouraging. I need to add a script for the text roll-overs on the home page. I played around with some things, but couldn’t quite get it ready for tonight’s presentation.
2 Comments
April 20, 2009 at 9:37 pm
I really like how the colors on your main page turned out! It still has the vintagy feel to it while I’m guessing you’re probably happier with it in terms of the different purple colors being “prettier” than the green and orange you first showed the class.
April 21, 2009 at 1:08 pm
Great work on your site so far, Andrea. One thing I thought about after class was, on your homepage, you should consider doing something very simplified, like how Raabia has her homepage on Cold War Memory: Just use your logo and the images for navigation. If you really want to emphasize the exploratory nature of your site’s nav, that’d be a good way to do it. I think the secondary nav near the bottom of the homepage detracts from this.
And as I said in class, the logo is terrific. Nicely executed.