Archive for category Layout Design

The jQuery Javascript Library …

jQuery is the most popular javascript library used in web sites today, with approximately 49% of the top 10,000 visited sites now deploying it.

The library allows for client-side scripting of HTML, and provides a broad range of apps for the designer.

Designed by John Resig, the library provides the tools for animation, enhanced page navigation, widget development, and numerous plug-ins.

The example shown at upper left is known as a ‘Tool Tip’. This script displays a configurable pop-up window that provides the visitor the ability to “hover” over a hyperlink and discover more information prior to clicking through.

Load time is rapid on practically every jQuery script I’ve used so far .. which have included zoomable photo images, image libraries and forms development.

To see jQuery in action, click on the image. It will open onscreen, darkening the background page. Click on the “x” or anywhere off the image to return to the page view.

For additional reading, you might start with the Wikipedia discussion page.

No Comments

Embedded Google Calendar …

An embedded Google Calendar. Using iFrame tags, a master calendar or linked calendars can be placed on any of a number of web pages. An edit to the calendar via Google Apps updates the linked web page(s) with no further intervention needed. Using a Google Calendar also provides their mapping features, which are very helpful to visitors when listing an event location. To see an example of the mapping feature, go to June 10, 2011.

No Comments

Fresh Content ….

Many web sites remain in a “static” state for extended periods of time. This may be counter-productive, as visitors are seeking something “new” each time they visit the site. One simple way to keep a site fresh and vibrant is through the use of a rotating main image. This is nothing new … Google changes their page appearance daily.

Using javascript, have embedded a series of rotating images that change each time a visitor “lands” on the page. To see how this works, click your browser’s ‘refresh’ button to see the changes.

With simple embedded scripting, a web site can appear “fresh, dynamic and updated” to incoming visitors each and every time they visit.

No Comments

Web Layouts … Follow The Eyes

Red image indicates longest pauses, followed by yellow and blue. Gray indicates little to no time spent on these parts of the layout and objects.

Red mapping indicates longest eye pauses, followed by yellow and blue. Gray indicates little to no time spent on these areas of the layout, such as the generic images that have been placed on this page.

An interesting study has been published by Jakob Nielsen entitled, “Eyetracking Web Usability“.

Using monitor mounted infrared sensors, Nielsen’s research studied eye flow and linger times across various web page layout designs to learn what attracted and kept the viewer’s attention, and what did not.

In his findings, Nielsen covers a range of topics … including discussions on photography, navigation, type usage, color, graphics, animations, ad placement and overall layout of a web page.

For web designers and marketers, Nielsen’s work can be a useful tool in determining how best to design a web page for maximum effectiveness.

To read and see more, as well as download a PDF-formatted chapter from the book, go to: There is also a link on this page for ordering the published work.

No Comments

Control The Scroll Using iFrames

One of the least desirable effects of a web page is having a large amount of material that falls below the ‘fold’ … a term that defines the page content that lies below the visible part of a web page display. If there is a high degree of content, the visitor may have to scroll down to an extensive degree.

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.

No Comments

Web Site Babylon …

The title of this web site is, “Form Follows Function” … but what does that really mean? Simply, that the site’s mission or purpose is clearly established first (function) … and that the author or designer designs the site architecture or graphical schematic (form) in such a way so as to always “stay on point”.

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 away from the primary message, and towards secondary or unrelated focal points. The result is a total dilution of the main 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.

No Comments

Aspect Ratio / Screen Resolution

What are web visitors using for a monitor when visiting a web site? How should a page be designed given those parameters?

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!

No Comments

Gallery Format

WordPress does not include a ‘table’ tool in its’ tool set, and I needed to show a uniform column and row thumbnail gallery grid within a post. Created a quick 3-row x 3-column table in my favorite web editor, set line depth, cell padding, and dimensions of table. Placed the HTML table code into the post, then uploaded and added individual images into each cell as a linked thumbnail, Thickbox activated.

No Comments

Thickbox Gallery

Click for larger image ...

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 ...

No Comments

Adjustable Layout!

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.

No Comments