Stinking iframes: www.about.com

Posted by: Ferenc Veres on December 11, 2004 02:12:47 PM +00:00(6774 Reads)

The development of the web killed frames, framesets. This is very great, frames just did not work, no details here, there were so many people explaining it before. But now, there is something stinking with IFRAMEs as well.

On most (of the few) sites using IFRAME the IFRAME content does not have a separated navigation, they display small related information to the actual webpage. So the FRAME tag problem with bookmarking, sending links could be valid here as well, but people have learnt to avoid it. Good.

HEIGHT of the new IFRAMEs is a problem I often see. I have my browser configured to 12px minimum font size, this is not big at all, you will see the screenshots. But somehow the content with the fonts installed on my computer (Mandrake Linux 10.1, X.org, Firefox, Opera, Konqueror) never fits in the IFRAMEs the designers make. Webpage layout, content and functionality should NEVER depend on text length, the font redering system component is differnet on every computer.

The only thing you can rely on is that "A" will have the content and meaning of "A", but you never know the pixel dimensions of it. Especially if you want to measure a lengthy paragraph, you are lost. We have learnt that when we first wanted to position a DIV by absolute positioning, laying under a paragraph, why did we forget it by now?

Examples are from the otherwise great "about.com", but can be found on many other sites.

Iframe illustration - not all text are visible Iframe illustration - scrolling within the invisible iframe reveals more text

On these images the "Print and Scan Offers" submenu is in an IFRAME, without mouse scroll-wheels I could not even access the last item.

Iframe illustration - not all text are visible Iframe illustration - scrolling within the invisible iframe reveals more text

This is just an ad, there was another one on which I cannot even click without scrolling down for the button. :-)

Iframe illustration - not all text are visible

This last one is inside the page content. Fortunately only 1 pixel left out, the underline of the last link, but also scrollable with the mouse wheel. "Of course" scrollbars are disabled on all these IFRAMEs.

Another question is accessibility. Having your main navigation divided into separated IFRAMEs is very bad. One menu should be after another, not in completely different documnets.

For the time being I would advice including the content of these IFRAMEs in the normal content of the page, that will make document's structural flow as it "looks" when rendered, and will avoid wrong guessing the height of specific menus or content elements.

Related links

www.about.com where I've made the example screenshots, from Best printers of 2004.
Why Frames suck - by useit.com. If you are new to the internet you can find historical detais here.

There are no comments attached to this item, be the first to post.

(required)

(required but not published)

About me

Photo of me Ferenc Veres
web developer
about me

Commodore books
Commodore logo My C64 and Plus/4 book collection (Hungarian): Commodore könyvek
Featured article

Exisitng editors for text data DjVu files are quite limited, like for example DjVuSmooth. So I've implemented a new editor in JavaScript, that allows editing both the strucutre of the text (paragraphs, lines, words,...) and the coordinates of the text boxes by simply dragging with the mouse, features like create, delete, merge are also available.

My other websites
Categories
My hosting choice

My affiliate link to the hosting center:

InterServer Web Hosting and VPS