I finally got our family website finished in terms of design and software.
Last night I finalized the design. I wanted to give it a homely feel. So I made it look like this as oppossed to my original design.
The cool thing is that I took note of how the CSS Zen Garden does their xhtml code. If you look at the xhtml of my two designs they are almost identitical. The only change I had to make for the "Home Sweet Home" template was to put my header's h1 in a div wrapper in order to use two backgrounds.
Take notice of the header, it looks like one big 780x100 image but it's actually made up of only two small images. The blue crosshatch is a 9 x 7, 2 color gif taking up only 71 bytes. The little "The Moritz Family" logo is the largest image on the whole page, taking up just under 10k. There are only two other images on the page and that is the sage crosshatch background and the grey crosshatch in the footer. Those two images are also around 71 bytes each. The total page size only 26k, that's means the page loads in 5.56 seconds on a 56k modem! My grandparents are still on a modem so they will enjoy the small page size.
This is a full report of the page sizes
As well as the small page size, I made it so that the layout of the site is flexible when font sizes are increased. If you increase the text size, the design stays about the same. That was decision was made because my mother's eyes are not perfect and sometimes she needs to increase the font size to see a webpage. Although the site was designed for a 800x600 moniter, it was designed with elasticity in mind so that the page expands when the window expands (unlike this site, whose design is the default wordpress template).
I'm going over to my parents house later today to scan in a few pictures for the photo album. The photos will be of our wedding and our honeymoon and also a few ultrasounds of Adin Jacob.
Post a comment