Part of the problem is that most web pages have their navigation elements (buttons and links) placed above the fold. When a reader scrolls down through the page content, they often lose access to those links and buttons until they scroll back up to the top of the page.

Embedding what is known as an “iFrame” (innerframe) into a web page allows for an image or another element, such as a separate web page, to be inserted into the parent web page. The iFrame tag can be configured to a set width and depth, scrolling attributes, and borders.

In the example above, an iFrame has been inset into the central section of the page and will serve as a placeholder for a dozen or more main content pages. It has been configured to not exceed a specified vertical depth, which means that on most browser resolutions, the entire page fits without needing to scroll. If the main content window contains elements that exceed the iFrame’s specified vertical height, then it allows that window to switch to a scrolling mode. The advantage to this design scheme? Above the fold navigational elements are always visible, regardless of where the viewer has scrolled to in the iFrame, and eliminates the need to scroll back to the top of the page to reach other main topic links.

In this example, have taken an image (fig. 1) and shown what the eye is immediately drawn to, the outbuilding. However, the subject is fairly centered, which can make for an uninteresting composition.

In Figure 2, have overlaid a grid that breaks the image down into one-third squares.

Using the grid, I have rescaled the image, and placed the subject in an area that occupies either the northwest, northeast, southwest, or southeast two-thirds quadrant of the image area. In this example, have chosen the southwest quadrant (fig. 3). The final edit is displayed in Figure 4.

Comparing the images in figures 1 and 4, we now see that by moving the subject away from dead center, the overall image now shows greater “flow” and visual appeal.

It is interesting to visit sites that are filled with distractions. Scores of links beckon the visitor to click … but to direct them where? In many instances, the visitor has arrived at a particular site to in order to learn more, but then is distracted from the underlying message, and encouraged to pursue web travel in disjointed directions. The result is a total dilution of the message.

For the designer, the addition of links to a particular page should always be weighed as to the overall impact it has on the site as a whole. Does the link add value, enhanced information sharing, or provide search engine optimization? Does clicking a link open a new window, keep the visitor within your site, or replace your content with something distantly related to your visitor’s initial interest?

Keep in mind what has been already shown by the television media. Attention spans have been shortened. Your message must be short, informative, and to the point. Direct the visitor to logical choices, and keep those choices to a minimum.

KISS … it’s a proven acronym that appropriately applies to both page and site design.

The Google application goes well beyond anything I’ve used in the past. The image at left illustrates just one of scores of reports available to the site administrator. Other statistical applications may show the IPs, but Google will break the information down even further, showing demographic information right down to the city level, including time on site and frequency levels. This is just one example of scores of reports available, and all can be downloaded in distributable PDF format.

Setting up a Google Analytics system is very straightforward. The administrator needs to first set-up an account at the link provided above. Google will provide some code that needs to be added to those pages you wish to track. After that, reload the pages to the web server.

Reports are accurate to within 24 hours. I use them for advertising purposes, targeted mailing programs, and search engine optimization (SEO) fine-tuning.

I recently reviewed these questions on one of my most heavily trafficked sites using Google Analytics.

We’ve seen a growing trend towards what are called “widescreen” monitors. For future reference, I’ll refer to them as “16:9 aspect ratio” monitors. Up to this point in time, all monitors were “4:3 aspect ratio” monitors. The aspect ratio can best be described as a display that is “x” units wide by “y” units tall.

On the site where I gathered data, the results were revealing. In a sampling of 3,000 visitors … 52% were using monitors with a 4:3 aspect ratio, 37% were viewing at a 16:9 ratio, and the rest were viewing at other ratios commonly found on netbooks and cell phones. The most frequently used screen resolution (34%) was 1024 x 768 pixels, followed by 1280 x 800 (14%).

For the designer, it is imperative to create pages that will fit in the widest range of monitors without the need for side-to-side scrolling, which most visitors find quite annoying and can leave a negative impression of the site. The designer should also consider that the visitor may be using sidebars or tabs on their browser, further reducing horizontal window space.

Someday … it will be a widescreen world. For now, consider the numbers and design accordingly!

This page contains links and information to vendors, suppliers, and organizations I’ve had the pleasure to work with throughout the years … and fully endorse. If you have any questions after viewing, please contact me and I’ll share what I know. If you do visit with a particular company, be sure to let them know you’ve learned of them through this site …. thanks!

Each link shown will open in a new window or tab, depending upon how you’ve configured your web browser.

This page will be going through constant updating … so be sure to check back from time to time.

Web Hosting

Pageplop: http://pageplop.com I’ve worked with this North Carolina based company for over a decade. They are the developers of MGI … a very powerful tool for web development. The best tech support I’ve ever experienced.

Hostmonster: http://hostmonster.com Affordable, powerful web hosting. The pages you see here are being hosted with Hostmonster.

Browser-Based Web Authoring

Blogger: http://blogger.com A service offered by Google. Free, hosted on Google or a host of your choice. Simple to use, can also tie-in nicely with various Google Apps and Docs.

WordPress: http://wordpress.org Free to use, Open Source code, very powerful feature set. Requires separate web hosting. Pages you see here have been authored in WP.

Cameras

Digital Photography Review: http://www.dpreview.com This site is perhaps the most comprehensive and professional site I’ve found. Full discussions of all the major brands, along with test photos, and honest in-depth “pros and cons” of each model reviewed. I’ve used the site to do research prior to the purchase my last three cameras.

Online Document Sharing

Scribd: http://scribd.com A free, social publishing web site. Provides the ability to publish your documents (Excel, Word, PDF, etc.) online and share either through links or embedding. Documents are previewed razor sharp, can be zoomed, printed, or downloaded from this repository.

Large File Delivery

DropSend: http://dropsend.com A free delivery service with limited monthly frequency use, huge file send capability with subscription. Browser-based, ability to send files up to 2 GB in size. Confirmation receipt is an extremely handy feature. For me, where large file sizes are the norm, this site has enabled me to bypass the need for creating disk based file storage and deliver art directly to printers and publishers via the internet.

Entertainment

Pandora: http://pandora.com If you enjoy music, this free site delivers music to your tastes. Type-in a musician, album, etc. and it will put together a radio station that contains that artist and comparable music. Have “discovered” quite a few artists I had never heard over the airwaves!

Telephony

Google Voice: Free domestic long  distance calling, transcribed voice mail, and a web widget for your site, Google Voice delivers an impressive set of features at no cost. The system has worked very well for me.

When it comes to an overall reference publication, it’s hard to beat British photographer Tom Ang’s, “Digital Photographer’s Handbook”. For me, this was probably the best $35 I ever spent at the time … to quote DP Expert’s review: “Subjects covered include the technology of cameras and a how-to-choose guide. The essential physics of lenses and their behavior is explained. All aspects of the art are covered, including framing, composition, lighting and subject selection. The post-camera chapters describe all common editing techniques, including cropping, exposure correction, black and white conversion, colour correction, spot removal and other computer manipulations of images. Some of his advice on achieving weird effects is a little esoteric. Scanning, printing, web-sharing and emailing, as well as file storage are covered.

This is an ideal classroom-in-a-book for anyone who wants to progress beyond the point-and-shoot and print-at-Big W stage. Ang’s own photos illustrate the text well. The layout and the clarity of the text are excellent.”

Says it all for me …..!

Above is an example of a Flash video created in FLV format and given a custom player. I use this format rather than YouTube because it provides a much higher degree of control and does not entail having to incorporate all the trappings of a YouTube feed.

Obviously, the digital camera did improve, and in ways never imaginable. My once essential OM-1 35mm SLR film camera now sits in permanent storage, while the digital variants are in daily use.

Digital image file management is sometimes an area that isn’t given much thought …. until the photographer gets a “Kodak Moment” frame … and later down the road, the image file isn’t up to snuff. If this has happened to you … here’s some pointers

• Set your camera to the largest file size and image quality. Storage media is inexpensive, and there’s false economy thinking you’ll double or triple the storage by going to a lower quality or resolution.

• After downloading your images, resist opening, viewing and editing the photo set. Instead, make a duplicate folder of the images and then open the copied image files. Place the originals on an inexpensive CD or DVD disk for archival purposes, or “lock” the files where they can no longer be altered.

If your camera has the ability to shoot in RAW mode, these last steps are not necessary, as the RAW (uncompressed) mode is not editable and must be converted to TIFF or JPEG first. Just save the RAW files as archives. However, most cameras, particularly the point & shoot variety, save the image file as a JPEG. The JPEG format employs what is known as “lossy” file compression in order to keep file sizes smaller. This means that data is thrown away with each save, causing a degradation of image quality each time the image is edited and saved.

Having an unaltered original image file may someday be worth its’ weight in gold ….

The printed document exists beyond the display screen. It can be read during a power failure. It is tactile and enduring. It does not get switched off. And … if the document has perceived value to the reader, whether it’s a well written letter, a good novel or a store coupon, it may be saved for days, months, or years.

When working with clients who are launching a new web site, product, or marketing campaign, my recommendation is usually to include print media in the mix. The web, TV, and radio are media forms that can sometimes flood the recipient with incredibly rapid bursts of information … that can just as rapidly be forgotten. Print media is the one form of media that can be digested thoroughly by the viewer and at times and places of their own choosing.

Print still endures … and for very good reasons.

So …. it never ceases to amaze, seeing what a mish-mash the use of type has become. Both print & web pages are seemingly being produced by individuals who use high resolution screens and possess 20/20 vision …. and often fail to use type effectively .

Why Do They Do This …… ?

• Authors who place type on dark, gradient, or bitmapped image text blocks, reversed out in white or other hard to read color (how natural-reading is that?).

• Small type. Please …. many of us have corrective lenses, maybe even bi or tri focals. Small type was originally designed to maximize the use of trees/paper, reduce printing costs, or hide the truth in legal documents. With the speed of the internet and the ability to display vast amounts of text in near-time, virtual page display space is practically free (and saves trees!). Why not use that space effectively with font sizes that can be read by all without the need of a magnifier?

• Choice of typefaces. Using decorative or script typefaces as body copy is laborious to read. They were designed to be used as headlines, not text.

Here’s a good rule of thumb. Small amounts of text copy …. sans-serif faces such as Arial, Trebuchet, Verdana, or Helvetica all work well. Continuous and long stretches of text, Century Schoolbook, Times, and Palatino have proven themselves over the past century as easy-to-read text. Set type in a size that your older readers will have no difficulty reading. Need examples? Look at magazines and books, and see what typefaces those publishers are using. The selected fonts are there for a reason …. maximum legibility.

Click for larger image ...

This is an example of a Thickbox gallery. Clicking on either the top or bottom thumbnail will result in the launch of an overlay display window. Navigation is controlled at the bottom if there is more than one thumbnail that has been activated. Clicking on a large image will close the overlay window.

Click for larger image ...

This site features the ability to go from fixed to self-adjusting (fluid) width, dependent on your browser’s display resolution. Look to the upper right-hand corner of the page. To the right of the type size control is an icon that looks like two caret marks. If this page is too wide for your browser, clicking on this tool will set the page to “fluid mode”, adjusting to the width of your display area and reflowing text within the main topic box.