CODEWITHSUNDEEP
htmlcss
user1372448
user1372448

Reputation: 437

Keeping the basic layout same across the web pages

I have a website in which I finished with the basic layout, design, fonts, styles, css etc.

For almost whole of the website, the layout i.e the sidebar, the footer, the background etc. will remain the same. There are custom embedded fonts used as well.

Since this basic layout will remain the same all across the website, I wanted to ask how can I prevent downloading of this content (like side-bar, fonts, or javascript etc.) again for the user, so that the other pages after the start do not take as much time as the start page.

I am sure there would be some mechanism since most of the websites have header/footer/sidebar in common across the pages. My website is in plain html/css, and there's no backend being used. Any ideas?

Upvotes: 3

Views: 3270

Answers (6)

user1193509
user1193509

Reputation:

There are definitely many ways to do this. I am a fan of dynamic inclusion. Here is a link to a great tutorial which explains how to set it up for your own page very simply. Dynamic Inclusion Tutorial NOTE: Don't be afaid of PHP, or having to change your file extension to PHP. It won't change your coding experience at all. It will just enhance your abilities.

I also have used the Javascript feature to hide certain elements. Depending on the size of your website, it may be just as easy to reload your CSS and navigation elements. However, if you really don't want your menu and logo to blink momentarily while it is reloading, you can just hide/reveal elements very simply with a bit of JS.

Here is an example function from my website:

function toggleVisible(e){
var i = e.id;
if(e.className == 'collapsed')
{
    e.className = 'expanded';
    e.innerHTML = 'Hide'
    var hiddenArray = document.getElementsByClassName('hidden' + i);
    hiddenArray[0].setAttribute('class', 'expanded' + i);
}
else if (e.className == 'expanded')
{
    e.className = 'collapsed';
    e.innerHTML = 'Show More';
    var expandedArray = document.getElementsByClassName('expanded' + i);
    expandedArray[0].setAttribute('class', 'hidden' + i);
}

}

The above code will run when the following link is clicked:

<a href="anywebsite.com">ANYWEBSITE.com</a>  ||  <a onClick="toggleVisible(this)" id="4" class="collapsed">Show More</a> || <a href="document.pdf">View PDF</a>

Also, another user mentioned caching. Caching appears to be unreliable. Check out the following links for more info:

Upvotes: 0

Andres Gallo
Andres Gallo

Reputation: 681

You can do this in two way. You say you don't have a backend, however the server where your website is hosted can be the backend.

Without any backend interaction: If you really prefer not to use the backend at all, you can make this a single page website, with some javascript to switch the content you have in there. The idea is you have your website structure, and your default data available the way you normally have it right. But you also have the html for your other pages in hidden divs. Then when you want to switch to say the about link you use javascript to get the content from the hidden div with that content and you place that content in the main div. 

 <!--First lets use jquery thought it can use some other framework-->
<script src="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery"></script>
<script>
    $('a[href=#myAboutPage]').on('click',function(){//Whenever link that points to #myAboutPage is clicked
         var getHTMLFROM = document.getElementById('myAboutPageHiddenContent').innerHTML;

         //And place it on main div
         document.getElementById('mainDivContent').innerHTML = getHTMLFROM
    });
</script>

If you wanted to use some ajax interactions: The process would be the same with the exception that the getHTMLFROM content, would actually be an html file that you request from the server.

Both of this javascript oriented methods will work, but would NOT recommend if you want your information to be SEO friendly. With that said reuse an external piece of css, to minimize redownloading the styling of your interface every single time.

Upvotes: 0

Alfred
Alfred

Reputation: 21406

You may design a basic layout first.

  • Avoid inline and embedded CSS maximum and add a class (can assign to multiple) or id (can assign to single) to common selectors.
  • Make a master stylesheet like master.css and attach this to every page.

Hope this helps.

Upvotes: 0

Johnny5
Johnny5

Reputation: 6862

Your images, fonts, css and other contents will most likely be cached by the client's browser on the first hit, so it will be downloaded just once.

For the html page itself, since you use static html content, the only way I can think of is using AJAX request.

Upvotes: 1

Tanzeeb Khalili
Tanzeeb Khalili

Reputation: 7344

You can static-site generator like Jekyll.

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

You probably want to use includes. So on each page you'd have a header include, a footer include, a sidebar include and even an include containing links to your css/js files.

Simplest way to do this would be to change your pages to be .php pages and use php includes to pull in the header file, footer file etc.

Upvotes: 0

Related Questions