Archive for category Web
Control The Scroll Using iFrames
Posted by baughdesign in Layout Design, Web on August 24, 2010
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.
Web Site Babylon …
Posted by baughdesign in Layout Design, Opinion, Web on January 28, 2010
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 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.
Using ‘Google Analytics’ …
Posted by baughdesign in Opinion, Resources, Web on January 3, 2010
I’ve been using the analytical tool, Google Analytics, for some time now. Prior to this point, I had used statistical programs provided by web hosting companies.
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.
Aspect Ratio / Screen Resolution
Posted by baughdesign in Layout Design, Web on November 4, 2009
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!
Gallery Format
Posted by baughdesign in Layout Design, Photography, Web on October 10, 2009
 |
 |
 |
 |
 |
 |
 |
 |
 |
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.
Embedded Video
Posted by baughdesign in Video on October 10, 2009
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.
Use Of Typefaces
Posted by baughdesign in Opinion, Print, Web on October 9, 2009
I’ve been around type most of my life. When a young boy, I often watched my father create typefaces by hand. He was the consummate calligrapher, and his talents were sought after by firms all over the country. As an established type and logotype designer, his lessons to me remained clear … type is intended to be read, with little to no need for interpretation.
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.
Thickbox Gallery
Posted by baughdesign in Layout Design on October 7, 2009
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 ...
Adjustable Layout!
Posted by baughdesign in Layout Design on August 11, 2009
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.
-
You are currently browsing the archives for the Web category.
