What are the new frames?

It seems like I'm a bit outdated on website creation.

Some years ago I learned to create simple websites with frames.

Yet this solution is discouraged by w3school.com and frames are no longer supported in future HTML versions.

So what are the simple replacements?

  • iFrames also seem to be discouraged by most developers
  • PHP seems to provide a solution? what is a simple way in php to replace frames?
  • if I'm not using php (actually I need to use JavaEE in one project), how can I create frame-like websites?

Short: How to create a good-looking (frame-like) website nowadays?


Solution 1:

Generally speaking:

Visually

CSS. There are numerous techniques for laying content out (depending on the precise effect you want, Holy Grail is a common desire).

The overflow properties handle scrolling sub-sections of pages, although designers who think that having a menu using up screen space all the time is a good idea are usually wrong.

Avoiding duplication of metacontent

(i.e. putting things like basic structure, navigation menus, etc on every page without copy/pasting them)

A template system (or an include system) that either runs server side (most common) or at build time (which can support HTTP servers which only allow static files).

The language this is implemented in is irrelevant, PHP is as common as muck, Java is an option, I tend towards Perl (and more specifically: Template Toolkit), there are many others. JavaScript is becoming increasingly popular for this type of job, with tools such as assemble becoming available. You can go all the way with a static site generator.

Use a search engine to find popular template languages or include systems for your programming language of choice.

Loading new content without leaving the page

JavaScript, usually with the XMLHttpRequest object (the technique being known as Ajax), and (if you are doing serious content changes) used in combination with the History API (so bookmarking and linking still works). Github are a good example of this. There are various frameworks such as React and Angular which try to make things easier. Note limited browser support and all the other things that can cause JS to file makes using good design principles essential. One approach to making these things robust is to write Isomorphic JS.

Solution 2:

Frames are not replaced by a new "technology". The state of the art is to put all content into the same document and style it via CSS. Of course server side includes can help you to do this.

Solution 3:

Use CSS positioning to create a frame-like interface and AJAX to change the content of a container. You can use JavaScript frameworks like jQuery, Prototype or MooTools to handle AJAX requests.

However, if you want to include content from another domain you have to use an <iframe>, since AJAX follows a same origin policy.

If you want to write DRY (don't repeat yourself) you could use some kind of template system (PHP, Ruby, Pearl, Python - and of course a framework for this languages).