Typographic web design
How to think like a typographer in HTML and CSS.
initial solution
Revisions
Student Example
Lesson 14: A Recipe, Part 4
(Applying the Design Across Multiple Pages)
Josh Terceira, Fall 2011
Josh added color to the section links, and added a background image. He also made the text a bit bigger overall. It's difficult to see in this screenshot, but the background image does not scroll. It remains static. The content of the page moves up over the image as the reader scrolls down.
All of Josh's recipe pages
Recommendations
The color added to the links doesn't quite work yet. The yellow is a bit cool—too yellow-ish compared to the background image. Consider a warmer (orangier? browner?) yellow.
Having a "home" link is not strictly necessary. However, more troublesome is that you haven't fixed the "visited" color for the links. The purple showing up is the default color for visited. Change the color. Using white to match the link color is fine. Slightly dulling the color (using a very light gray) would also work.
You've used italic for the "you are here" link in the list. Droid Sans doesn't have enough emphasis. Try creating more emphasis to show the reader where they are in the site. You might change weight, color, border, etc. I highly recommend you don't use size to add emphasis, as you are already using two colors in the navigation list.
The right indent on the section links worked better before you added the image. Now the main navigation is running into the edge of the image and the section links are creating an odd vertical space. Also, shifting the vertical spacing so there is more obvious chunking between the section and section links would help.
I'm looking forward to seeing some of the other pages in the site.