Discussion on:

Avoid frame-based layouts in favor of alternative designs

The only good thing about frames is the navigation that doesn't dissapear when scrolling pages that are way to long, and that is easily duplicatd with css.

You mention that keeping nav in place on long pages is eaily duplicated with CSS. Can you post your technique?

Though IE doesn't process it properly IIRC (big surprise there)

sice I found trhe quirks mode switch.
check my reply below with both the css and xhtml that gives the frame effect without using frames, and works with ie.

  body { border: 0pt none ;
    margin: 0pt;
    padding: 0pt;
    background: #eeeeee repeat scroll 0% 50%;
    height: 100%;
    max-height: 100%;
    font-family: arial,verdana,sans-serif;
    font-size: 76%;
    overflow: hidden;
    }

  * html body { padding: 180px 0pt 50px;
    background-color: #eeeeee;
    }

  #container { padding: 20px;
    background: #eeeeee repeat scroll 0% 50%;
    font-family: "times new roman",serif;
    font-size: 1.2em;
    position: fixed;
    top: 200px;
    left: 0pt;
    bottom: 50px;
    right: 0pt;
    overflow: auto;
    text-align: left;
    }

  * html #container { height: 100%;
    width: 100%;
    background-color: #eeeeee;
    }

  #header { border-bottom: 1px solid #73a2bd;
    background: #88aacc repeat scroll 0% 50%;
    position: absolute;
    top: 0pt;
    left: 0pt;
    width: 100%;
    height: 200px;
    overflow: auto;
    text-align: center;
    }

  * html #header { height: 200px;
    }

  #footer { border-top: 1px solid #73a2bd;
    background: #88aacc repeat scroll 0% 50%;
    position: absolute;
    bottom: 0pt;
    left: 0pt;
    width: 100%;
    height: 50px;
    overflow: auto;
    text-align: center;
    }

  * html #footer { height: 50px;
    }

  h1 { margin: 0pt;
    padding: 0pt;
    font-size: 3em;
    }

  #footer p { margin: 5px 10px 0pt;
    color: #73a2bd;
    }

  #header img { margin: 0px 0px 0pt;
    }

  #container img { margin: 0px;
    }

  #absolute { border: 0px solid rgb(0, 0, 0);
    padding: 10px;
    background: #eeeeee repeat scroll 0% 50%;
    position: absolute;
    top: 100%;
    right: 200px;
    width: 80%;
    }

  #left { border: 0px solid rgb(0, 0, 0);
    padding: 10px;
    background: #eeeeee repeat scroll 0% 50%;
    float: left;
    color: rgb(0, 0, 0);
    width: 20%;
    }

  #right { border: 0px solid rgb(0, 0, 0);
    padding: 10px;
    background: #eeeeee repeat scroll 0% 50%;
    float: right;
    color: rgb(0, 0, 0);
    }

  a { text-decoration: underline;
       color:#0055ff;
       font-weight: bold;
       font-size: 1em;
   }

    a:visited { text-decoration: underline;
    color: #aa33ff;
    font-weight: bold;
    font-size: 1em;
    }

  a:hover { text-decoration: underline;
    color: #FF0000;
    font-weight: bold;
    font-size: 1em;;
    }

  .grey { color: rgb(136, 136, 136);
    }

  .ltgrey { color: rgb(221, 221, 221);
    }

  img#mascot { float: right;
    }

  #header ul { border-top: 1px solid rgb(115, 162, 189);
    clear: both;
    text-align: center;
    }

  #header ul { margin: 0pt;
    padding: 0pt;
    background: transparent repeat scroll 0% 50%;
    list-style-type: none;
    height: 3em;
    }

  #header ul li { display: inline;
    color: rgb(115, 162, 189);
     font-size: 1.3em;
    }

  .columnone { width: 15%;
    float: left;
    text-align: left;
    margin-right: 2%;
    }
  .columntwo { width: 70%;
    float: left;
    text-align: left;
    margin-right: 2%;
    }

  .columnthree { width: 15%;
    float: right;
    text-align: right;
    margin-left: 2%;
    }

the #header ul sections are the navigation menu styling.

the xhtml is also simple:

 
 

 
   Jaqui-Greenlees::About 
 
 
 
       
 
 About Me 
         
           Home  |  
           Software  |  
           Consulting  |  
           Web Design  |  
           Contact Me  |  
           Privacy Policy  |  
           Links 
         
         
 
 
 
 
 
 
 
 
 
 
 
   
 
 
 
  
   
  
Copyright © 2006 Jaqui Greenlees all rights reserved.
       

throw some long content into any of the column divs, I usually use columtwo to center the content left to right with blank space in columns one and three created by the empty paragraph tags.

What do the asterisks in the css mean?
Thanks!

By using frames, we're able to avoid users having to reload the menu system on our navigation frame. If I could force all users to Netscape or Firefox, that would be fine, but IE seems intent on ignoring the command that says don't generate a drop-down until someone actually uses it, so it takes longer to load a page.

You say the only good thing is the menu not moving. Like you said, that's easy to do without frames.

I think the biggest advantage of frames is download time. I don't know about the US or other countries, but here in Canada, there are still a lot of dial-up surfers. They have no choice. High speed isn't available everywhere yet, at least not here. Some country areas can get satelite high speed, but most can't afford that.

Bbasel made some good points. Frames are very useful for those without broadband, and they are still a very good tool if used properly.

Depending on who your site is for, frames may still be the best way to do a website. There will be disadvantages like bookmarking, but my parents (live in the country) would love it if more sites didn't require downloading the menu again for every page. It takes 2 minutes for every page on the Bell website, their banking website, and others, even though most of the pages have the same content.

Website designers think everyone has high speed. When they start making sites that can be seen on dial-up, then frames can go.

isn't the size of the menu, it's the stupidity of using large multimedia formats for content or navigation.

my own simple site loads bazingly fast, even in IE, and isn't frameset.

http://jaqui-greenlees.net

I make sure that sites work with lynx, text mode browser that doesn't support frames or tables or javascript or images. My sites have to have all scripting logic on the server end.

If a site isn't accessable with lynx, then you can guarantee it won't work for someone using a brailletty, which generates bad word of mouth advertising.

frames do not work with a brailletty.

edited to add:

note: lynx does not use css either, but a css based layout doesn't break with lynx, and framesets do. instead of a horizontal navigation list I get a verticle nav list and the scrolling comes back. I'll accept that, since it is only 1% of web users that get that presentation. the same 1% that would get garbage from frameset pages.

don't get me wrong, I like the functionality that framesets provide, but a properly designed css and xml site wil give the same performance benefits without the negative perception 80% of people have wih framesets.

Me colleague and I have programmed an database application which is used in our company to manage more than 25.000 assets and 8000 users including network data and software distribution.
This all is done with a user interface based on active server pages.
We are using the iframe tag quit a lot to break down the forms into single pages, and it works fine.
Of course, the target environment of this application is a company intranet where 99% use the IE as webbrowser and not all have broadband access. Some forms have up to 3 MB of data.
But here, frames do have their benefit for the perfomance and layout management.
The W3C should think about what they want to archiev with their standardization. Telling people "don't use this anymore and thow away what you allready hve created" is just to simple.

I'm a little scraed of rejecting a technology just because it is a relic, with little valuable explanations.
I agree on the problems of search engines, which HAS a business impact, but the other reasons for neglecting are quite weak.
I have long lived beside developer who runned into new technologies because they were new, not because they were more efficient. Developer love to use new technologies, and they do so because - as everyone - they need to have fun in working.
But the role of designers is also to make choices able to support the business at reasonable costs. It is too often forgotten!

What do you want to offer your visitor with AJAX?
1. updating part of a page (xmlhttpRequest), so you do not have to get all the data again and the user may view an nicely updated page
2. keep data in the browser hidden, so you can quickly show it again.

Point 2 can be done with frames aswell. A frames with can be manipulated and hidden.

Point 1, one can use the xmlHttpRequest inside a frame aswell.

Other advantages of working with frames, are that you can gradually evolve to a single page application. What I mean is that if you have a SPA, everything must be done with xmlHttpRequests. If you have one normal post or get in your SPA, the page will be reloaded and your SPA is history. An other disavantage of AJAX is that content you get with an xmlHttpRequest and show in an div, must not have html, head and body tags. So this content can not be viewed in a separate window. It is a road you should ride all the way. When using frames, you can gradually use more xmlHttpRequests.

What I also think is that when getting content with xmlHttprequests and showing them in a div, you often at that div to be scrollable, because content length may vary. So you and up with making scrollable divs to show your content in! Are you not re-inventing a frame?

I think these are supported in XHTML 1.0 but maybe not in XHTML 1.1. I'd heard that the latest screenreaders support these.

First, I will start by saying I have not been as active in web development as I would like to have been over the past couple of years. I remember when I started to really spend time developing web pages - I used frames pretty heavily at the time. My main use for them was to place a navigation structure in one area of the site so I would only have to update one page when necessary. With CSS, that is not as easily accomplished. I am responsible for a site now where each individual page has to be updated when there are changes. I didn't create the initial design and am getting this one 4th or 5th party.

I have started to learn flash so I can design common page elements (like navigation elements) in the flash environment so I can just update one file and have the entire site get the update. It gets tedious and nerve racking opening 25 to 50 different pages just to update one little piece of content. If anyone has any other ideas, I welcome the suggestions.

BTW - I left frames behind about 3 or 4 years ago myself. Of course, when I did use them I turned off the borders and didn't allow them to be resized either - just looked cleaner.

Flash looks pretty, but isn't readable by the search engines so they are unable to follow your navigation. There are several way to make menus with a single update point. One is by using a technology such as ASP .NET and XML Based Menus. Adding and removing menu items from the XML file and allowing a Menu control to render the menu at load time.

The other and quite simple way to build the menus is by using an include file. Includes work for html just as they do for javascript. You can build your tables or divs for your menus in another file and include that file on your pages. Updating the include file will be reflected on all of the pages.

I'm personally a fan of creating Dreamweaver Templates myself.

I've never tried to play with the include files (other than .js) and have just started playing with DreamWeaver. DW is what the original developer used, but several other people got their hands on it before me, so I have no templates and have to update each page individually. Once I get up to speed on DW, I can redesign the site and put templates into action.

Guess I have a lot of reading to do, thanks for the input.

For dynamic content, I use PHP scripting with a database backend. That way, any changes in the data (stored in the database), automatically updates the content on all web pages.

but that one proved to be problematic. The DBA would take the database I was using offline and break the entire web app on me. I would get calls and emails telling me that it died and I would have to ask the DBA what was going on. It would be down for hours, nay DAYS, by the time that it would be back up. So I changed to static pages with CSS.

I still have plans to use ASP, PHP and/or PERL/CGI components, just not in a database that will be up and down all the time.

PHP (and other scripting languages) allow you to include other files into the output.

I have used this to standardise my menus and footers on the sites I maintain, meaning that I can use CSS to layout the individual pages while maintaining a single pair of files to change (One for Menu and one for footer).

i started my reply and then noticed that a few others beat me to the punch. php is an amazing, powerful, easy to learn server-side language that solves the problem you describe. and there are a number of ways you can approach your problem.
you could, for instance, merely include the common sections into each page that needs it from a single common file. or you could make one single web page that updates the different sections based on the value of a variable. you can mix php and javascript together to execute different functions on mouse events. not every approach is going to be appropriate, but if you've been out of web development for as long as you say, you've definitely missed out on one of the best things to happen to web development, hands down.

Maybe somebody can help me get out of this frame I'm in. I have a site that uses htm pages created by an application and updated regularly. I have a navigation frame that points to these generated pages in the right frame. Since the content is updated frequently, this works great. Is there a way to do this with CSS or any other technology not including frames?

When frames were introduced most people did not have broadband access to the internet. With the proper use of frames and JavaScript you can drastically cut down on the amount of data the user of you site has to download.

We still have offices in remote areas that do not have high speed access and are using dial-up modems. They spend most of their time in one frames based Intranet application. If they had to download all the scripts and navigation each time the page loads then their response time would be greatly increased. By loading frames with these components then they only have to download the content of the page they are working on.

Frames are a tool and like all tools have their place. Maybe when everyone everywhere has access to broadband we can retire frames for good.

Sounds to me that frames are still in use more than the author may realize. I still use them myself as I have found CSS, Flash, and the like very complicated, tedious, and frustrating to use. I find using frames a simple, fast way to develope my websites, on the fly so to speak. Dial up does access them faster and easier. And, contrary to what the author stated, I get many compliments on both my personal, and corporate websites. Agreed, Flash and CSS can be a lot showier, but I have to balance my time spent designing with results produced. Frames still help do that.

...if you and your clients don't mind losing potential viewers because --
1. search engines couldn't index your site well
2. bookmarks failed to bring users back to your outer page
3. some browsers and screenreaders couldn't handle your (framed) pages
-- go ahead and use frames. I find it hard to believe that frames are that much easier to code than some sort of include file (for common navigation code). I find it hard to believe that a framed navigation bar saves that much download time over a simple text-based link setup (with or without graphic buttons). What are your users running on... smoke signals at 1 bps? Don't forget that an extra page (the outer frame page) has to be downloaded at the beginning, too.

The only argument I can think of for using frames is that not all browsers out there support CSS well. Well, developer/client inertia is probably a good reason, too.

Depending on:
Who is going to the site...
What the site contains (ie. pictures)...etc.

*I have found that new computer users LOVE Frames! The navigational side is always there. There is no feeling that you are being sent to another website when you click on a link which is confusing. So Frames makes it less confusing.

*Search engines are fine -Use JavaScript.
Although I found that Google might go to the body side of the page, if a small bit of JavaScript is included on each of these pages the viewer is sent to the best of the index pages which will then include the body of what they were seaching for.

*The use of Frames should not always be used.
But that would be a judgement call base on:
what is on the site
who is going to see it, etc.

*I don't have a problem with Frames.
I just finished a site using Frames(calgarymotorcyclescooter.com). I also knew that they would all be using IE and I was right -- 99% IE, 1% FF. But on different website it was mainly FF. Also, only 38% had screensizes of 800x600. Everyone else was larger. 100% of them had JavaScipt enabled. 65% use XP, 15% use W98, 13% use 2000, 7% use ME. All these things play into the picture.

So, you see, you need to know what your probable audience is going to be, and I was right.

I especially like the photo templates for the Yamoto bikes. I wish more people would post a URL. I always get good ideas when I can see a site and connect it to what the author says.

As a web developer, I was trained in table-based layout way back when, and then switched to full XHTML for structure, CSS for presentation layouts.

Combining those with either templates (via Dreamweaver) or includes (any server-side language, heck even HTML if it's supported) eliminates the need for frames.

Weren't frames used so you didn't have to update the menu or other static areas on every single page when you changed an element in the area?

Thanks for telling us about XFrames, though, that's something that I might look into.

Speaking as a user, I loathe frames. I think the biggest problem is nobody who writes webpages with frames is content with just ONE! They all have to have every little piece of the page in non-resizable frames, so the bit you want on your old 12" monitor is bloody invisible, & even on your giant new monitor you can only see one line at a time. Unbelievably aggravating! I was on a frames page once (never found what I was looking for on it, either) that had _12_ different frames! It might have had more, but I quit counting & went elsewhere at that point. You do your business no service when your customers are too mad at your web page to want to deal with you.

I'm still working on learning more CSS, but my top row of navigation buttons is all CSS, graphics included. Seems to work pretty good. I'd like to do the same with the dropdown on the right, but haven't quite figured that out yet. www.billings.lib.mt.us
I try to code for low tech/slow downloads, as rural Montana is in the same boat as Canada - lots of dial-up left. I know I have major gaps in accessibility, but I am making (slow) progress. With an IT department of 2 people, and me the only one who does HTML/CSS, the SysAdmin does any webpage updates she needs in a hurry in (gasp!) Frontpage, because it's handy, & I de-bloat later, if it's a long term page or I have any copious free time (hah!). So we muddle thru - something I think a lot of people do.

Its not clear what alternatives allow combining resources from multiple web sites?

Specific example (real world) Web site A provides an interactive graphing webpage
and invites its use for educational web sites.

Web site B, educational, needs a side by side display, graph from website A
and explanation of graph from web site B.

Further, Web site A graph is "live", users can change parameters to see how it changes
graph.

This does not seem possible without frames. Does Css or any other alternative allow
blending content from multiple websites into a single page presentation?

How does HTML 5 propose to address this very real world problem?

Similar problems: Web sites about web sites, and using real working interactive
access to during tutorials.