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.


33: Helping The Client

A significant amount of my time is spent in educating, coaching, or hand-holding the client and gleaning web content from their “on-hand resources.” Building the site is the easy part. My focus is producing forms and shortcuts to help clients quickly assemble material (reduce the learning curve.)

Of a 6-week website production period, about 2 weeks is spent waiting on the client –30%! Room for improvement.  Trimming decision-making is the first focus. Ultraspeed limitations help. Now my focus is helping the client make decisions on what’s important and what isn’t. I can produce custom sites for very little money, very fast –as long as the client stays within my self-imposed limitations. If they step out of bounds, I have to say, “Sorry. Keep shopping.”

The client frequently DOESN’T know what’s “good value.” Or “How good is good enough?” This requires some educating and they then buy a web product based on “perceived value.” Not how many hours or pages are spent. This is the secret of making money –not fluffing things up. Tell the truth instead.

I also screen my clients. 50% don’t qualify. I don’t do stores (well? within limits –say a dozen PayPal items), I don’t do government or state or municipalities or churches or schools or non-profits. Those are monster sites and loaded with committee feature creep. Long-term slow turnaround projects.

32: HTML Frames Strength– PRESENTATION

Molly Holzschlag’s book titled “250 HTML and Web Design Secrets.” She said: page 265 “Part of the problems with Frames is they go against the premise of markup –there job is presentational.”  (Used $0.30 on Amazon. Save your money!)

PRESENTATION TOOL 

While she was explaining why to “never use frames”, she inadvertently also explained one of Frames great values –as a presentation tool.

SECOND STORY

For many years, http://www.secondstory.com/ used Frames on their website. Note: I do not like the information density (aka cramming) on their new site. After 15 years, they finally  switched to more of a Flash-XML solution –very heavy on transparency effects –and dropped HTML Frames entirely. So it is now very slow loading. Bloat! They have sophisticated programmers now to babysit their code –and bells and whistles. Fixed overhead (payroll) is required. My point being, for storytellers, Frames provide a lot of possibilities for visual and textual materials coexisting on the screen. And simply. No high powered technical people necessary. This thought frightens web people!

HTML Frames provide a “shell” for framing offsite additions / utilities. Visitors never feel they’ve left the site. Very cozy. This is “transparency and comfort.”

31: Quotation from Marty Neumeier about Simplification of Websites

AN INTERVIEW WITH MARTY NEUMEIER by Brian Alvey
Excerpted from Meet the Makers, April 20, 2003
http://www.meet-the-makers.com

Alvey: How does online branding differ from offline branding?

Neumeier: Online branding is still in its infancy, so practitioners are still groping for the answer to that question. Of course, the experience we have with a website will contribute to how we feel about a company. But what’s missing in most web design is an understanding of the role differentiation plays in branding.

Since most web designers are throwing the kitchen sink into their sites, many sites tend to look alike. When designers start grappling with how to simplify their sites, they’ll come face to face with brand. Once you simplify a design, everything that’s left has to work harder.

30: Web Images: How good is “good enough?”

“Image quality” isn’t even in the top 10 most important functions or features of a website. I see web design and stage set design as having a lot in common. It’s the view from the back-row theater seats that count –not the up-close details.


Tools for image processing include: Adobe ImageReady –which comes with most versions of Photoshop, next is Photoshop and then Ubuntu GIMP. All of these programs have “Save for web” functions. This gives a much more compact file size than regular JPEG files. There are other programs, plugins, and online methods to improve file sizes. Note: GIMP requires a plugin to get “Save for web” features. Check your Linux “repository” for GIMP extras.

How good is good enough?

The person who cares the most about image quality is the owner or designer of the website, NOT the viewers. Viewers put this at the bottom of the list. Still the image needs to be recognizable and readable! Everyone has to decide their guidelines –but here are mine: make the image file sizes as small as possible in weight. Images are the main hogs of bandwidth.

Settings should not be arbitrary or rigid.

Some photos will compress tighter than others. Eventually, this become intuitive. Some images work better as GIFs than JPEGs –or better as PNG. It requires some experimentation. You soon learn the human eye is quite capable of discerning shapes and forms. The more random the image like water, soil, grass, etc, the more it can “tolerate” lossy compression.

Fancy Optimization Tools
There are two tools online extremely useful for optimizing images but are only available for Firefox as addons. Yahoo!s Yslow All Smush.it
and Google PageSpeed. Both require the installation of FireBug addon first.

JPEG Compression Guidelines for Speed
Usually, for photo images, JPEG compression is best. JPEG allows you to select a setting while previewing the image. I consider 70 high and is the quality I use for “portfolio grade” images. But the standard seems to have crept up to 85 or higher settings for all images. In other words, essentially little optimization at all! Try and resist this foolishness. It just doesn’t buy anything in better quality. For normal images, I use a setting of 50. Smaller, less than 100-pixel-square images, can be pushed down to a setting of 30 –or switch to GIF. And for large backgrounds, with blurry depth of field effect, I drop down between 1 and 10. This causes noticeable image degradation but is only for “effect.”

Guidelines for GIF Images
GIFs are compressed using the number of color represented (color bit depth.) You can really tweak some images hard using GIF compression especially text and illustration images. Plus in ImageReady, there is a “lossy” setting that can do some “serious damage” in a positive or negative way.

All Compression Techniques Require Good Judgment
I squeeze too hard for some designers tastes. That’s because I realize the visitor doesn’t care much. But they care intensely about page load speed. Beautiful doesn’t count as much.

29: Modifying Blogger Environmental Sections

I’ve been showing the incremental process of designing “The Virtual Repository” for environmental biophysics .org. Above are two Blogger sections out of four. Each section has a header now to tie back the “feeling” of the Landing page on the main site. I’ve pushed the headers pretty hard for file size reduction. They are 15K to 20K GIFs. Some are a little grainy.

The banners have a “cooler” color combination and I may need to warm them up to match the Landing Page. Yet to be determined.

And a common HOME button.

This isn’t quite what I’d like yet for return navigation. More of a “close window” button. Blogger has limitations like this –but is free. I also learned you can’t create more than 3 blogs in one sitting. You have to wait about 24 hours.