Google search / reframing web pages

**d000hg** · 31 January 2010, 17:31

Assuming you mean traditional HTML <frame> tags then they are very strongly discouraged for many reasons, including the problems you are finding.

Or were you talking about iframes?

http://stackoverflow.com/questions/1...se-html-frames

**Platypus** · 31 January 2010, 17:38

Originally posted by d000hg View Post

Assuming you mean traditional HTML <frame> tags then they are very strongly discouraged for many reasons, including the problems you are finding.

I'm talking about traditional HTML frames

So... if frames = bad
How can I get the 'traditional' scrolling behaviour where the left and top frames remain visible?

Now that Google has indexed my site, won't everything just go bad if I change my site structure to not use frames?

Sounds like I may be in more of a mess than I thought ...

**Durbs** · 31 January 2010, 17:45

Originally posted by Platypus View Post

Am I just simply barking up the wrong tree using frames anyway? The website building package I use seems pretty keen on frames! I like the 'look' I get with frames as it means that the page "banner" and navigation are always visible.

I'd really like for Google to list the "main" page and not just the "body" frame ...

Your thoughts and suggestions would be welcome!

Frames fell out of favour a loooong time ago for a long string of reasons. I'm surprised your package recommends them - what is it?

Check Googles take on frames: http://www.google.com/support/webmas...n&answer=34445

They basically say they make no guarantee where frames are concerned.

I would say steer clear full stop, you'll easily be able to replicate any layout you are currently using in frames using non-frame markup.

**d000hg** · 31 January 2010, 17:52

Originally posted by Durbs View Post

Frames fell out of favour a loooong time ago for a long string of reasons. I'm surprised your package recommends them - what is it?

Originally posted by Platypus View Post

Am I just simply barking up the wrong tree using frames anyway? The website building package I use seems pretty keen on frames! I like the 'look' I get with frames as it means that the page "banner" and navigation are always visible.

That's probably the problem, such tools are rarely that good, even modern ones. I'm not aware personally of a graphical tool that let's you lay things out easily and doesn't break current best practices. Anyone else?

I think you've got a title/nav bar which is locked to the top/side of the browser window as you scroll content - is that right? You can replicate this using <divs> and some clever CSS trickery - there are examples all over the web - but it depends how good your HTML hacking is if you can easily do it yourself, or need to find a web developer/designer.

If I were you, wait for Nick to reply with better advice than mine, or at least more detailed.

**Durbs** · 31 January 2010, 18:03

Originally posted by Platypus View Post

So... if frames = bad
How can I get the 'traditional' scrolling behaviour where the left and top frames remain visible?

If you google for free CSS layouts you'll find loads of 2 and 3 column examples.

If you want the header to be always visible then set the sites container to a fixed height and a child div within your main content div to be a set height and it'll scroll automatically if the content overflows:

<div id="yoursitestext" style="overflow: auto; width: 790px; height: 500px; border: solid 1px blue;">
This is your main content</div>

**Platypus** · 31 January 2010, 18:19

Originally posted by Durbs View Post

Frames fell out of favour a loooong time ago for a long string of reasons. I'm surprised your package recommends them - what is it?

Net Objects Fusion v11.0

Originally posted by d000hg View Post

I think you've got a title/nav bar which is locked to the top/side of the browser window as you scroll content - is that right?

Yep.

Originally posted by d000hg View Post

You can replicate this using <divs> and some clever CSS trickery - there are examples all over the web - but it depends how good your HTML hacking is if you can easily do it yourself

Arrghh! I was hoping to avoid *yet more* trickery. The reframe JS code is bad enough. I've jumped through several hoops already, resorting to plenty of PHP to overcome various problems. I could probably code such 'trickery' myself, but the tools doesn't have unlimited flexibility in this regard.

When I asked a question on here some time ago "best website authoring tool?" the 'winning' answer was "notepad + a web designer" which TBH I really don't want to do. NOF is great for keeping a site consistent and making it easy to write and maintain. But this frames issue is starting to be pain.

Originally posted by d000hg View Post

If I were you, wait for Nick to reply with better advice than mine, or at least more detailed.

<PLAINTIVE SHOUT>

Nick ???????????? Help please

</SHOUT>

**Platypus** · 31 January 2010, 18:21

Originally posted by Durbs View Post

If you google for free CSS layouts you'll find loads of 2 and 3 column examples.

If you want the header to be always visible then set the sites container to a fixed height and a child div within your main content div to be a set height and it'll scroll automatically if the content overflows:

<div id="yoursitestext" style="overflow: auto; width: 790px; height: 500px; border: solid 1px blue;">
This is your main content</div>

I'd almost certainly have to kiss the tool goodbye to do this

Nevertheless, I really appreciate the advice. Thanks!

**Durbs** · 31 January 2010, 18:22

Originally posted by Platypus View Post

Now that Google has indexed my site, won't everything just go bad if I change my site structure to not use frames?

Realistically, yes. You'll need to consider page naming so you don't lose current named indexed pages when your old widgets_top.htm,widgets_content.htm pages etc just becomes 'widgets.htm'. You can use your redirects here to lessen that impact and also make sure you have a custom 404 page up there containing meaningful text links to different site areas.

**NickFitz** · 31 January 2010, 19:05

Originally posted by Platypus View Post

Does anyone have a view on which method might be considered "best" ? Is it possible that with the .htaccess method, when Google tries to index the content, it won't be able to find the body frame because each request to load (index) the body frame is redirected to reload the "main" page? This would mean that Google would be unable to find my content, so pretty disastrous, to say the least.

Hmm... how are you using mod_rewrite exactly?

When the browser gets the document frameset.html, it parses it and finds references to top.html, left.html and body.html, and requests each of those. If the request for body.html is redirected to frameset.html, then the frameset will be loaded again in the main frame, and the whole process will start again in an infinite recursive descent.

Therefore your mod_rewrite rules must be checking something to see whether to redirect or not. If what it is checking is the "Referer" request header (TBL's spelling mistake, not mine), which would show that it was the frameset asking for the document, then you should be aware that some users, possibly unwittingly, have "Referer" disabled - I believe that Norton Internet Security, for example, disables this header by default, at least in some versions. Those users would be subject to the infinite recursive descent outlined above, which would prevent them viewing your site and possibly even crash their browser, or at least trigger an "Out of memory" error

If you're willing to live with that, then you'd have to add a whole bunch of other tests for the various search engine bots' "User-Agent" headers, so as to avoid sending them the redirect. (I'm not sure if bots bother sending the "Referer" header when parsing a frameset.)

There are still a lot of framesets out there and Google knows how to deal with them, so you're probably better off without the redirect. However, I also think frames should be avoided.

Consider just one problem with frames: I look at your site, I find something of interest somewhere other than the home page, and I bookmark the page so I can come back to it later. However, as the browser location is the frameset, the bookmark will take me back to the home page, and I would have to navigate through the site again to find what I wanted. If I was coming back because I wanted to contact you with the idea of putting some business your way, I might at this point decide that I couldn't be bothered to hunt around for the page I thought I'd bookmarked, and instead go on to the next place on the list of possibles and give them my business instead.

If you want to switch to having no framesets and duplicating your top and side content on each page, but still want to have them remain in place when the page scrolls, then you can use CSS: "position: fixed;" is the property you want.

However, IE6 doesn't support that; users of that pile of crud would still get the page, but it won't look quite right (too much whitespace pushing the main content down and left and the navigation won't be full-height), and the whole thing would scroll.

If you aren't yet ready to ignore IE6 users, it's possible to correct the whitespace problem with a little bit of CSS served only to IE6, so then they get the page laid out correctly but the entire page still scrolls. It's possible to use a bit of JS to fix that, but it always looks like pants; my advice would be to simply accept some graceful degradation for IE6 users. If growing the height of the left column is important, you could probably use the "faux columns" technique, again targeted only at IE6.

Simple example with graceful degradation, including conditional comment that serves some extra CSS only to IE < 7:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>position: fixed demo</title>
<style type="text/css">

html {
    font-family: Verdana, Arial, sans-serif;
}

body {
    margin: 0;
}

#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6em;
    background-color: #666;
    color: #fff;
}

#nav {
    position: fixed;
    top: 6em;
    left: 0;
    width: 12em;
    height: 100%;
    padding: 0 1em;
    background-color: #ccc;
    color: #000;
}

#main {
    margin-left: 14em;
    margin-top: 6em;
    padding: 1em;
}

</style>
<!--[if lt IE 7]>
<style type="text/css">

#nav {
    float: left;
    display: inline; /* fix the 3px-text-jog bug */
}

#main {
    margin-top: 0;
}

</style>
<![endif]-->
</head>
<body>
<div id="top">
<h1>HyperGlobalPlatypusCorp</h1>
</div>
<div id="nav">
<ul>
<li>Page one</li>
<li>Page two</li>
<li>Page three</li>
</ul>
</div>
<div id="main">
<h2>position: fixed demo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta consectetur condimentum. Vivamus tristique dolor vitae arcu bibendum vel vulputate metus sodales. Mauris sagittis pulvinar augue, nec laoreet dolor commodo at. Curabitur dapibus, sapien eu venenatis sodales, tortor neque adipiscing diam, sit amet semper mi lectus nec massa. Pellentesque sed blandit ipsum. In vulputate hendrerit tincidunt. Pellentesque sed vestibulum justo. Sed non elit est, non malesuada nulla. Integer at eleifend dolor. Praesent adipiscing, sem vitae sagittis semper, sapien mi rhoncus purus, in tempus mi nisl ut dui.
</p>
<p>
In sit amet nulla vitae urna semper dapibus in ut ipsum. Vestibulum facilisis feugiat orci nec adipiscing. Nunc vitae diam et tellus hendrerit placerat vitae eu justo. In dolor odio, ultricies et egestas at, accumsan id est. Vestibulum vel turpis tellus. Sed mattis, sapien et dignissim pharetra, dui metus tristique orci, porttitor laoreet purus erat vestibulum velit. Cras pellentesque est ut enim feugiat ac sagittis velit eleifend. In hac habitasse platea dictumst. In fermentum tempor magna ac sollicitudin. Nam suscipit rutrum elit, id lobortis lorem aliquam sed. In in magna et orci interdum lobortis. Morbi at enim et mauris dignissim volutpat. Curabitur in diam nec ligula dapibus interdum ac sit amet magna. Proin a ligula quis justo tincidunt gravida quis sed urna. Nullam quis risus mi. Quisque pretium ornare ante non adipiscing. In commodo adipiscing porta. Aliquam sodales pretium mauris, a faucibus eros tempor sit amet.
</p>
<p>
Ut faucibus ultricies mauris, at dignissim libero lacinia vel. Integer lacinia quam sed massa condimentum scelerisque. Praesent blandit venenatis enim vel scelerisque. Praesent tincidunt, urna id dictum dapibus, nisl libero scelerisque nibh, a iaculis neque lorem sed turpis. Nulla diam tortor, interdum ac egestas ac, rutrum vitae ante. Sed tempor, nisl quis feugiat fermentum, dui lacus auctor felis, nec posuere orci dui eget neque. Cras eu justo eu ligula tincidunt lobortis nec ut felis. Nulla eget tortor vitae libero pretium cursus vitae ac ligula. Vivamus consequat leo in velit hendrerit viverra. Donec ornare dignissim mattis. Praesent convallis mattis hendrerit.
</p>
<p>
Maecenas bibendum elementum velit eget laoreet. Ut placerat malesuada elit a aliquam. Etiam sagittis pellentesque lorem quis aliquam. Donec tincidunt libero ac nisl iaculis sit amet suscipit elit mollis. Aliquam rutrum, tellus faucibus interdum fermentum, augue urna eleifend orci, vitae aliquet dolor augue nec enim. Nullam lorem est, ultrices vel eleifend eget, vestibulum eget justo. Duis ultricies nulla vitae nisi hendrerit rhoncus. In arcu tortor, auctor at ultrices eget, iaculis ut massa. Duis scelerisque ultricies varius. Curabitur fringilla, dui sit amet aliquet molestie, ante orci lobortis elit, id tristique nisl ligula id urna. Aenean volutpat bibendum imperdiet. Duis sollicitudin pretium erat eu cursus. Suspendisse et diam nec ligula condimentum varius. Vivamus hendrerit metus ac tortor iaculis non aliquam purus lacinia.
</p>
<p>
Duis tincidunt porttitor varius. Fusce eget justo ac erat hendrerit congue sed sed turpis. Duis nec sapien commodo dolor volutpat fringilla. Donec volutpat sollicitudin fringilla. Fusce vehicula porta cursus. Fusce consequat ante sit amet eros tempor et tempus risus scelerisque. Aenean pretium nulla tellus. Quisque elementum, massa a viverra viverra, leo elit tempor odio, sed ultricies mauris sem eu orci. Vestibulum ullamcorper magna vel sapien porttitor elementum. Maecenas sit amet sapien lorem. Sed sed orci sem, id sagittis purus. Donec viverra hendrerit justo eu volutpat. Cras faucibus magna non elit vestibulum sed tincidunt lectus consequat. Sed nec elit orci.
</p>
</div>
</body>
</html>

Google search / reframing web pages