HTML/CSS Mockups
April 20, 2009
These mockups are basically things we have been working on for a while. Despite that, trying to polish the static pages to where they both have all the elements we had in our color mockups, as well as validating correctly, required some more changes.
As a reminder, here are the color mockups -
Homepage:
Color Mockup - Home Page
Gaining the High Ground -
Color Mockup for "Gaining the High Ground"
and NRO Directors:
NRO Directors - color mockup
And the static HTML/CSS pages from our site:
As you can see, we simplified from the “box-within-a-box” on the static historical explication pages, to a simple one-box version. I think it works alright that way, but comments are welcome! We also did the footer as one box with some simple lines as dividers between the different footer elements rather than the multiple boxes.
The header element seemed to look better with a silver logo, so that is what we went with on the pages. In order to get the CSS to validate we had to change some of the color names to RGB values and make a couple of other small changes. It still doesn’t officially validate because it says our style sheet doesn’t exist, I double-checked and it certainly does exist, so not sure what’s going on there.
The HTML, however, shows 619 errors and won’t validate, not sure how to rectify that!
As far as CSS goes – I used the theme’s style.css file and found certain things like background image, header image, footer style, main-content style and made the changes to what was originally there to make the file have the look/feel of or mockups. The custom logo, header and background images were done in Photoshop Elements.
Jeremy’s suggestion to use the “clear” break in CSS to force our media and text to behave with one another was excellent and helped to “clear” up those issues. Adding an extra one of these breaks kept the images from hanging over the edge at the bottom.
Now if only the timeline worked in Internet Explorer!
