Member Avatar for s.t.s

Hi all

I am just starting out with setting my site up. I have spent quite a lot of time tinkering in the past so have a halfway decent idea of HTML and a small smattering of experience with javascript.

I would like to do a small 4 or 5 page site and would like to make it as easy to navigate as possible and I have been toying with the idea of just having one page and then using layers for the different content and a small show/hide script to turn them on and off to create an effect of viewing pages but with no load times (after the initial page load). Does that make sense or have I overlooked something? I guess AJAX could also give me a similar appearance but I have only basic js experience and never touch AJAX so is it worth the effort?

I also noticed someone mention on here that a top layer of a transparant gif is a good way to prevent people copying your images? would this also work to protect text? (I know they could view source but each step you add to make it harder will deter a proportion of the possible copies) Are there any other better/easier ways of achieving some level of protection of the text and graphics I use (not that anyone is likely to want to copy them anyway :$ )

Thanks in advance

  • 3 Contributors
  • 4 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by s.t.s

Dani AI

Generated

As wondered about layers vs AJAX: both approaches have valid use cases, but they trade simplicity for control. A single-page layer-based site gives instant-feel transitions, while AJAX lets parts update without a full reload. Both require deliberate handling of state, URLs, and accessibility to avoid leaving visitors with broken back-button behavior or unbookmarkable content. For a small 4–5 page site, start with the simplest architecture that meets the content goals and add progressive enhancement only where it helps the experience.

Practical, low-risk steps that build on points from :

  • Keep pages templated server-side (or use a static site generator) so common chrome is maintained without duplication.
  • Use resource hints and modern headers to improve perceived speed: rel=preload/rel=prefetch, defer/async for scripts, gzip/brotli compression, and proper Cache-Control/ETag settings for static assets.
  • If smooth in-page navigation is desired, implement a tiny router that swaps visible panes, updates the URL with the History API, and restores focus for accessibility.

A minimal example for swapping panes and keeping history (progressive enhancement):

function showPane(id) {
  document.querySelectorAll('.pane').forEach(p => p.classList.add('hidden'));
  const pane = document.getElementById(id);
  pane.classList.remove('hidden');
  history.pushState({pane:id}, '', '#'+id);
  pane.querySelector('h1') && pane.querySelector('h1').focus();
}

On the image/text protection question raised by : overlaying a transparent GIF is a weak deterrent. It breaks selection, hurts accessibility and SEO, and is easily worked around. Better options are visible watermarks, serving lower-resolution previews, embedding metadata, keeping originals off public pages, and relying on clear copyright/terms and takedown procedures. Technical tricks only deter casual copying.

Further reading: History API - pushState, Preloading content, Cache-Control header, ARIA basics.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

as one page it will be a time consuming download, users click away
small pages load fast,
preloading the next page to give speed can be accomplished by a script in the foot of the page
reuse of icons and scripts between pages shortens load times again.

Member Avatar for s.t.s

Hi almostbob

Thanks for that ... I guess that makes sense ... so to clarify, if I use the same logo and background files etc then these will not be reloaded by the browser??

Cheers

Sam

Member Avatar for MidiMagic

Once you have downloaded the image, all pages can use the same copy without downloading it again. The only times it would be downloaded again are if the user refreshes the page, or if another page used so much Internet cache that the imaged had to be discarded. I use that trick in my pages.

If you are so paranoid and possessive that you put special features in to protect your intellectual property, I suggest that you don't publish it all. What does it hurt you if someone saves a copy. They can save the entire page, and have a folder full of parts.

Member Avatar for s.t.s

LOL on the paranoia thing ... my feelings exactly ... I just had a request for that 'feature' from one of my friends who is after a site soon and is uber worried about stuff like that. Just interesting to know what options there are imho.

Thanks for the confirmation on the images stuff, I hadn't realised that, should make page load times less concerning to me. I guess the best thing I could do is stop talking about it and doing a test site to see what happens :p

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.