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.

28: Designing portfolio websites

A portfolio website for photography or fine art works best if it contains the following seven sections:

1. Landing Page Design [branding -- theming]
2. Image Gallery
3. About Page [The Interview]
4. The Testimonial
5. The Blog
6. The Process Page [how you work]
7. The Call to Action [ contact page and location of Galleries]

Example link.

27: Respository Site continued

The Repository Splash was very fast (10K) --but boring. The sectional page was loading fast enough (23K) that the SPLASH page could be dumped and everything moved up a layer. Also the large full-screen images were modified in Photoshop to give more depth using Render > Lighting and Render > Lens Flare --two simple filters. The SPLASH page presents one of six images. Each time the visitor lands on the page, they see a different one from what they saw the last visit. This is a cookie-based Flash widget from FlashDen. But to really give good effect, the dynamic image needs to be used on a Framed Hybrid website.

While working on this project, it occurred to me the simple formula of trade show booths apply well to landing pages. For a trade show booth, you must assume you'll receive the same attention span as a billboard at 55mph near a highway. Just a few seconds of decision making time. There are a few inexpensive details that can make a big difference. 1) color, 2) foliage, 3) lighting, and 4) legibility (1 inch for every foot reading distance.) In other words, 8 inch high letters at 8 feet. On a screen that would translate into a 2 to 3 inch high headline. (140px to 220px? That seems big, eh?) The SPLASH page seems to have these elements. What do you think?

The SECTIONS are Blogger pages, originally embedded in Frames. This made for clumsy bookmarking and so I made the pages standalone with a badge identity (home button) to tie back the look. This way visitors can enter from the blog or the website without confusion. Articles and downloads can be bookmarked, linked, or sent in emails.

The badge:

Also, the clients favicon.ico was added to each blog page and to the website for some additional continuity.

An ABOUT page was added that mimicked the blog pages design. The Blogger pages are modified and customized templates.

26: More experimental highspeed testing: Speed Strategy

Three layers deep: Speed Strategy
Screen resolution 1024 x 768 px minimum size shown.

1. SPLASH page: 10K (0.21 second load time with cached screen.)
There are only two string-background tiling GIFs on this page. One in each frame. Everything else is "pure" HTML.

2. Sectional INTRO page: Dynamic resizing image and text placeholder in a nested frame. Loads 23K in the bottom frame. 0.882 seconds buffered cache.

3. Embedded BLOGGER page for each section. Content updated by product managers. Shown here is placeholder content. 31K.

GOALS

Pages keep opening up with lighter space as the sequence progresses (less color coverage.) Successive pages load a little slower. We start at 10K > 20K > 30K --but the "information scent" is getting stronger. The "extra" time is tolerated better by the viewer. The header in the "blog" needs to be reduced in size. It's horsey.

The finished site will have 4 embedded Blogger pages.

25: How to use GZIP and PHP for speed.

GZIP is a software application used for file compression/decompression. GZIP is short for GNU zip; as the program was created as a free software replacement for the compress program used in early Unix systems, intended for use by the GNU Project. Version 0.1 was first publicly released on October 31, 1992. Version 1.0 followed in February 1993.

GZIP replaces patent-encumbered data compression algorithms.
Many client libraries, browsers, and server platforms (including Apache and Microsoft IIS) support GZIP. GZIP is often used in web applications and software such as PHP to improve speed. Hypertext PreProcessor (PHP) is a server-side HTML embedded scripting language. PHP is not always provided by a hosting server or may be a "paid" option.

Finding out how to use PHP-GZIP is a goose-chase even though the solution is really simple. PHP is something that need to be "switched on" on the server. Check your ISP for how to do this. Or assume it's on and test.

To convert an HTML file to PHP. Change the .html or .htm extension to .php. This will break your links so you'll probably have to rebuild them or use a search and replace tool in a text editor.

Add the following line of code BEFORE the opening HTML tag at the top of your code.

<? ob_start("ob_gzhandler"); ?>
<HTML>

* This source code was highlighted with Source Code Highlighter.

That's it. Simple. You can test to see if PHP is activated with YSLOW or PageSpeed tools. GZIP-PHP can compress the HTML code by 50% to 70%. It does not compress images.

Study: Web Users Prefer Speed Over Customization
The most important interface design factor is speed, according to a new HCI study. Good interface design is essential for widespread user adoption and ultimately website success.

24: TWEAKING- what counts and what doesn't

I built this 16K test site sometime ago and was revisiting the experiment. I wanted to see if it could be optimized with Google's PageSpeed addon for Firefox. The answer is: not really. A well built page, after optimization, only yielded about a 1 or 2K gain in page weight. The page load dropped from 0.7 seconds to 0.4 seconds after buffering. The initial load was, and still is, 3.7 to 4.0 seconds.

The things I did shaved about 1K from images and another 1K using GZIP-PHP compression. Was it worth the effort? No!

The page is at this link if you'd like to see it live.

Here are two screengrabs, one at 1440 x 900 px and the other at 1024 x 768 px:




The site is built using 4 HTML frames. Yes the vertical black bar is a "skinny frame." The other bar is composed of tiling string background images. And a seamless low-res 5K grunge tile at the top. The last image is a transparent 5.8K GIF with only 4 color-bit depth.

Improvements to this site "graphically" would be tighter CSS letter-spacing and line-spacing on the Courier headline and background CSS colors for link rollovers.

This is a good example of how color is critical to theme --yet costs nothing in pageweight. The theme was built from sampling the top tile and building from that using reverse-color lookup. See entry 07 for this procedure.

Four graphic image elements used are shown below:

23: LoBand landing page positioning

I'm convinced the most important and probably the only thing really needed on a LoBand landing page is your positioning statement. If you've never written a positioning statement or don't know what one is, visit this link.