Designing Web Structure

Dear experts,

After I reviewed some basic website structure design, I came up with these two solutions just not sure which one to go by or there are other better methods out there.

Solution 1:
1. create these sections:
     i. header
    ii. body
    iii. footer

2. using php function include to add those components to the page:
    for example if I want to create  home, about, contact, etc.... pages
   I can do this:

    home.php
 ----------------------------------------------
    <!DOCTYPE html>
    <html>
      <head>
      </head>
     <body>
             <?php include "path/header.php";?>
             ...........
           <?php include "path/footer.php";?>
    </body>
   </html>

I can have a navigation bar in header.php and using <a> tag to navigate to each page. The downside is that for each of the page that I created, I have to make sure all pages include header.php and footer.php. The upside is that I don't need to deal with javascript or any additional code. I believe the page upload will be fast as just in plain CSS and html code with minor php code (I am excluding any other default js libraries such as bootstrap.js, respond.js, etc..... which just simply talking about my code only).

Solution 2:

I can simply create a single page look similar to the structure from solution 1 and using the home.php as example:

    home.php
 ----------------------------------------------
    <!DOCTYPE html>
    <html>
      <head>
            <script type="text/javascript" src="path/JQuery.js"></script>
      </head>
     <body>
             <div id="header_content"></div>
            <div id="body_content"></div>
           <div id="footer_content"></div>
    </body>
   </html>

I only need to create a template page for including header, footer and body content like this:
    i. header.php,
    ii. footer.php,
  iii. body.php (this body can be any content that I want to put into the body_content div by naming the file to home.php, about.php, etc.....)

I will be utilizing the JQuery AJAX to load up the page into each of the div section like this:

    1. header.php into the header_content div
    2. footer.php into the footer_content div
    3. xxx.php into the body_content div

Upside is the that I just need to maintain a single section by page as in I don't need to include header.php or footer.php to all my pages. The only thing that change is the content in the body_content div.

Downside is that there will be more code running to render the page.

I am not sure which method will be the best and used by most web designers. I wish to get an idea of what it can be done and if there are other methods out there. Thanks.
Kinderly WadeprogrammerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason CarsonComputer TechnicianCommented:
If you have a lot of pages I would go with solution #1. If at some point in the future you need to edit the header code it's easier just to edit header.php once and it would be included in all your pages.

If on the other hand you went with solution #2 and you needed to edit something in the header you would have to edit all your pages  <div id="header_content"></div> code one at a time. A time consuming process.
Kinderly WadeprogrammerAuthor Commented:
Hi Carson,

I thought the solution #1 requires more work which I have to type in php code "include" for all my pages instead of the solution #2.

The only thing that will change in solution #2 is the content within the body_content div tag
Jason CarsonComputer TechnicianCommented:
Lets say you have 20 pages on your website and you go with Solution #2. There may come a time when you need to make a modification to your header code. You would then have to manually edit the header code in all 20 pages so it is the same.

Whereas if you go with solution #1 and you have to make a modification to your header code. You simplly make that modification in header.php one time and it will be included in all your pages because you used <?php include "path/header.php";?>.

<?php include "path/header.php";?> doesn't seem to me like too much code to type and it will save you a lot of work in the future if you need to make modifications to the header code.

If you will never have to make modifications to the header code then solution #2 is fine. I'm speaking from an experience I had. I once designed a site that was about 30 pages. I needed to make a change to the header code. I had to manually go through all 30 pages to make that change. If I had included header.php for those pages I would only have had to edit header.php and the change would have been made for all 30 of those pages. Would have made my life easier.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Dave BaldwinFixer of ProblemsCommented:
No, it is not the only difference.  If you use jQuery or Javascript to load those divs, they will be loaded after the page has enough content loaded to see them.  If you use solution #1 with the PHP includes, the content gets loaded with the rest of the page without any delay.  Always use #1 when you can.

A second reason for using number #1 is search robots.  They will read only the original page.  In method #1, the whole page is always there.  In method #2, the sections that are loaded with jQuery are Not part of the original page and may not show up in search results.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kinderly WadeprogrammerAuthor Commented:
Thanks Dave!

I have another question upon solution #2. When will be the time to use it instead of solution#1?
Thanks.
Dave BaldwinFixer of ProblemsCommented:
The only reason to use #2 is when you want to change something after the page has loaded.  Or maybe hide things from the search engines?  I have done 1 or 2 pages using solution #2 and they had the problems I mentioned.  Or a customer has an existing site where you have to add things to it.

I do most sites with method #1 where the 'include' for navigation only changes when I have a new page to add to the site.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.