34: Julia Mumford .com Continued Decorating Philosophy

In entry 15, I rebuilt Julia's site for speed making it 17K with a 50K background image = 67K.

The Original (where we left off. Boring!)

I decided to apply the "tradeshow booth" formula I described in entry 27. The simple elements are 1) color, 2) foliage, 3) lighting, and 4) legibility.


Color
The color theme was determined previously --and I wasn't going to change it but I did enhance the palette with a sampled yellow.

Foliage

I selected a shot by searching on "purple flower" at stock.xchng - free stock photo site. The original image is shown below and was 3.7MB. Very large!

I then cropped and optimized the image as a 30Q 17K JPEG.

This was then placed as a HTML Table cell background image with an inline style. This allowed HTML type to float above the background.


Lighting (depth and shadow)
A 13K GIF 32-color gradated "string tile" was created to use as a CSS background image. It repeats in the x-axis at the top of the page.

Legibility

The HTML Times New Roman "Julia Mumford" title was black and horsey. It was hard to read. Adding a inline Style highlight with a yellow #FFCC33 sampled from the flower made it pop and allowed the type size to be reduced significantly.


BEFORE- black large type over photo

AFTER- smaller black type on yellow floating over photo

The Julia Mumford website now appears more attractive and actually weighs less than it did (46K) --a bonus. What needs changing now? Those carrots no longer seem to match the theme --a pot of steaming food would be more appropriate, Maybe next time?

Stretchiness

The page is extremely liquid as shown in the image below. And the window can collapse even further and still not break. Try it live.