Good practices for including a menu in a website?

Question

I'm quite new to website building. Yet do have some experience in LaTeX and some other programming languages.

I really try and reuse code etc. So, when building my website, I want to "include" for instance the menu in the other pages, in stead of explicitly copy-pasting it in.

There are several ways I know of that can do this:

• the menu is a static page, your content is in an iframe. This is the worst way to do this, since it breaks a lot of stuff such as back/forward etc... (which I know might be wishable for some, but not in my case).

• This is what I'm using now: every web page includes the menu using an iframe:

  <iframe src="menu.html" class="menu" height="100%" frameborder="0"></iframe>
  

  the downside to this method is: the menu doesn't get reloaded properly when people revisit your website, unless you use some scripting that specifically tells the browser to do this:

  document.getElementById('some_frame_id').contentWindow.location.reload();
  

• This is what I was thinking of since my new host allows this: including the the menu using SSI.

  < !--#include virtual="/menu.html"-->
  

  The possible downside is that every webpage must allow for the includes, and thus has to be parsed (this slows down the filesystem). Security is not a problem for me.

What would you recommend? Are there courtesy rules of what should be done? Are compatibility problems with any of the methods described above? Are there better methods?

For instance: I'm suspecting the second method (which I'm using now) breaks google indexing, so only my homepage gets indexed. (I'm not sure if this is true though).

Stanchion

Don't try to optimize prematurely. Use SSI and, if there is a performance problem, then see what you can do. But I bet that it will never happen. – Gordy

The google indexing is not broaken. The server includes the piece of HTML before sending it to the client, be it someone's browser, or one of google's crawlers. The script including the 'include' comment will never be sent. – Iniquitous

@JBNizet: okay, I read in this tutorial on cgi that this is a bad idea. I must say I haven't noticed any performance issues in the pages that I already SSI. Are there any rules/conventions on how to name the pages (extensions)? My SSI-enabled pages are extended .shtml right now, is there a problem if I just keep everything .html (I know this will work, but is it ok to do it)? – Stanchion

@sys.stderr: Yes, the google indexing would not be broken using SSI, but it would be using iframes or am I mistaken? – Stanchion

This book is from 1996. It's prehistory in internet time. Most of the pages you browse on the internet, even simple blogs, are dynamically generated using PHP or other server-side programming languages that impose a much bigger load on the server than SSI, yet they don't cause any performance problem. SSI is blazingly fast. You won't notice any difference from purely static pages. – Gordy

Answer 1

The way to do this is to use something like Server-Side include. Other web developers might be using PHP or Python or some templating system, but ultimately the design pattern is that the HTML output is duplicated, but HTML in your template system is not.

Your concern about SSI slowing down rendering is unfounded. SSI is incredibly fast and the web server will employ the same optimizations it would rendering one page; it can cache it in memory and process it on the fly.

Given that you're simply wanting to avoid duplicate HTML, SSI sounds like a good way to go, especially if you already have it working well for you. Its downside is its lack of advanced programming features. But speed is basically never an issue with SSI; it's one of the fastest solutions out there. It also does not affect Google indexing; Google only sees the outputted HTML, not the SSI. SSI is server-side.

Johnettajohnette

Answer 2

Why not use a JQuery menu? http://archive.plugins.jquery.com/projects/plugins?type=44

Miscellanea

Answer 3

In HTML5 you can do this easily with the Object tag, eg

<object data=menu_page.html type="text/html" style="usual css..." ></object>

You have to specify the position, width and height using css. So if it's structural html rather than text content, you could put it in a background layer using style="z-index:-1;position:absolute;top:0;left:0; width:100%;height:100%"

This seems to work in the most recent browsers (tesing on Safari and Chrome)

Some advantages over SSI:

• The client can cache the often-repeated header footer stuff, reducing bandwidth use.
• You can view your pages offline in your browser as you wrtie them, without any server.

Apriorism

Answer 4

1.) One fast way to manage this is to use DreamWeaver templates. Any HTML block can be made into a template. A template can be used in any page on your site. Templates are managed as an asset inside DreamWeaver. Edit the template and DreamWeaver updates all the places where that template is used in your site's pages. The tool is not free. Other free technologies follow:

2.) Velocity template engine drives lots of the pages on apache.org's site. You can use ANT to generate your web site. http://velocity.apache.org/engine/devel/webapps.html

3.) If you are doing anything with Java ... check out JFS and Facelets. http://www.ibm.com/developerworks/java/library/j-facelets/

Natant