1

When designing pages for a project that uses dynamically loaded pages/content (the website will not be accessible to search engines, so that's never a concern. Only for desktop PC use. Not for mobile phone use. Using Spring MVC), is it wiser to:
1. Create a page with a header, menu and footer and dynamically load the content in the center, according to what the user chooses from the menu?
OR
2. Create separate html pages for the header, menu and footer and design a dynamic page which with center content, that will dynamically load the header, menu and footer?

  • A priority for this project is to use up as less of the network bandwidth as possible.
  • My main concerns are that if I use iFrames to load the header, menu and footer, there might be problems when resizing the page.

Doesn't GMail work by loading only the center content? Do you know how they manage to allow the User to use the back button of the browser inspite of the content being loaded dynamically?

This is what the layout would look like:
enter image description here

  • Try AngularJS, and please don't use iframes... – Gowtham Gopalakrishnan Jan 14 '15 at 7:51
  • Thanks, but my team can't use AngularJS for now. Moreover, my doubts will be cleared only once everything highlighted in bold are answered. – Nav Jan 14 '15 at 8:01
  • Do I answer your question? – Gowtham Gopalakrishnan Jan 15 '15 at 4:34
  • One problem with loading via JavaScript is that Chrome and IE don't really allow it: XMLHttpRequest cannot load file:///F:/Projects/Frontend/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. – Nav Jan 19 '15 at 14:12
  • 1
    You're trying to access the file header.html by using local access. Try using a HTTP server and then change the url scheme to http rather than file – Gowtham Gopalakrishnan Jan 19 '15 at 14:16
2

Depending upon your requirements (low network bandwidth), I think splitting your website is such a bad idea since it will result in many requests. I don't recommend dynamic loading for navigational purposes since the headers and menus are only lightweight.

Here are the answers to your questions:

  1. Maybe. It depends upon the size of your dynamic content and static content.
  2. There is not much difference to your first question. Separating content into parts is good idea and makes your code readable and maintainable. I would recommend splitting it. But, again loading dynamic content depends upon the type and size of the data.

If you want the back button kind of functionality, then go for AngularJS.

Hope this helps. :)

UPDATE: In that case, you can combine the static fixed assets, and then load the content dynamically using jQuery if there is no need for data persistence(like Gmail back button). Try checking out SPDY - think it will reduce network latency.

  • Thanks Gowtham, but are you recommending splitting the website into multiple parts or are you recommending only loading the center content? – Nav Jan 14 '15 at 8:21
  • First tell me about the type of content you need to load dynamically. – Gowtham Gopalakrishnan Jan 14 '15 at 8:41
  • One 23x23 image, four 10x10 images, title text, a logout menu and the website's main menu, the animations of which will be controlled by jQuery. These are for the headers and menu bar. The footer will have only text. The center content can have anything from images to forms and even videos. – Nav Jan 14 '15 at 8:44
  • I've updated the question with a picture – Nav Jan 14 '15 at 8:52
  • Updated my answer. – Gowtham Gopalakrishnan Jan 14 '15 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.