8

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?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Arian
  • 3,183
  • 5
  • 30
  • 58
  • It depends. Are you using a serverside language (Python, PHP, Ruby etc.) or are you working with pure HTML? – Blender Feb 27 '12 at 14:03
  • What were your uses for frames? What did they do for you? – Oded Feb 27 '12 at 14:03
  • A fairly good discussion of this can be found at http://stackoverflow.com/questions/4846019/any-way-of-using-frames-in-html5 – synthesizerpatel Feb 27 '12 at 14:03
  • 1
    There's no such thing as good-looking frames. That style went out in the 90s. – cHao Feb 27 '12 at 14:04
  • Frames provided a way for me to create a website with good usability – Arian Feb 27 '12 at 14:06
  • Good usability is subjective. What did they provide that afforded good usability? – Oded Feb 27 '12 at 14:10
  • The navigation was always visible and unchanged. Also pages had to be written only one time, so no duplicated code. – Arian Feb 27 '12 at 14:13
  • 2
    Old by still funny: http://www.zark.com/headscape/frames.html – Oded Feb 27 '12 at 14:13
  • 4
    There are solutions for navigation (see `nav` element in HTML 5). With frames, you loose the ability to deep link as the whole site has the same address - one good reason they are not recommended anymore. – Oded Feb 27 '12 at 14:14
  • Thank you for the reason! That's a good point! – Arian Feb 27 '12 at 14:24

3 Answers3

15

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    How to change the past "content-frame" of a side then and leave the "navigation-frame" as it is, without writing duplicate code then? I still see websites nowadays with this two components (maybe there are other words for it now) – Arian Feb 27 '12 at 14:23
  • @Coretek — See the two sections of my answer labeled "Avoiding duplication of metacontent" and "Loading new content without leaving the page" – Quentin Feb 27 '12 at 14:24
  • Ok, I understand that these server side languages are used for it but how do you do it with them? Creating a method (java speaking) which removes elements and places new elements? – Arian Feb 27 '12 at 14:26
  • 1
    @Coretek — A template system is usually used. [This one](http://freemarker.sourceforge.net/) is top of Google (for Java land). I normally use [TT](http://template-toolkit.org) – Quentin Feb 27 '12 at 14:29
  • So I always have to use "third party" code no matter which language I use? – Arian Feb 27 '12 at 14:33
  • 1
    @Coretek — There might be an Oracle maintained template language for Java, I've no idea. Avoiding libraries written by people other then the language vendor generally isn't a useful goal. – Quentin Feb 27 '12 at 14:38
  • I just feel that it keeps my program as lean as possible. Does PHP also need third party technology for this? – Arian Feb 28 '12 at 12:59
  • 1
    @Coretek — PHP **is** (arguably) a templating language (although I'd look at using a better one with it if I had to use PHP (Smarty was the bees knees last time I seriously looked at PHP … a decade ago)). Don't avoid third party code just to be "lean" — you'll either end up writing something that does the same job (but not so well, and with a much greater investment of your time) or you'll finding other inefficiencies. – Quentin Feb 28 '12 at 13:12
  • So you would definitly suggest me to learn Perl before learning PHP I guess :) It just seems like every Webhoster supports PHP, but then again most also Perl. One Question a bit out of topic: why does nearly no Webhoster supports JavaEE ?? – Arian Feb 28 '12 at 13:21
  • 1
    JavaEE is relatively complicated. PHP is cheap and easy. So you get lots of cheap hosts supporting PHP. Once you hit good hosting you get much more choice. Go for a VM and you can install whatever you like. – Quentin Feb 28 '12 at 13:36
  • Haha yeah but as you said the price of a VM is "goliath" compared to a php "david" server. Thanks for all the clarification! – Arian Feb 28 '12 at 13:38
  • For this answser [HTML5 imports](http://www.html5rocks.com/en/tutorials/webcomponents/imports/) could also be relevant, even when they are [as good as not supported](http://caniuse.com/#feat=imports) (except for chrome) – Nico O Sep 15 '14 at 13:57
4

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.

YMMD
  • 3,730
  • 2
  • 32
  • 43
2

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).

Zeta
  • 103,620
  • 13
  • 194
  • 236