11 Replies Latest reply on Jun 7, 2011 3:49 PM by Nancy OShea

    Newbee question - Headers Footer and menus

    VelocitySails

      What is the current, best practice for building a web site with consistent menus, headers and footers etc.

       

      I have read good and bad about SSI, and Dreamweaver libraries etc, and would like to know where folks in the industry turn to complete this kind of task.

       

      I did a really simple site with php, www.canvasdoctors.com but someone told me that how I did that was overkill and not correct.

       

      I hope i have been clear.

       

      Thanks for your time.

       

      Ashley

        • 1. Re: Newbee question - Headers Footer and menus
          John Waller Adobe Community Professional & MVP

          Server Side Includes (SSIs) definitely.

           

          I'm not aware of any downside using them - only upside.

           

          What have you read that's bad about them?

           

          I did a really simple site with php, www.canvasdoctors.com but someone told me that how I did that was overkill and not correct.

           

          No overkill that I can see but the pages are all invalid HTML since they're badly structured - no DOCTYPE, no opening <html> tag, body elements inside the <head>.

           

          Presumably this has been compiled using SSIs? However they need restructuring so that they produce valid pages.

          1 person found this helpful
          • 2. Re: Newbee question - Headers Footer and menus
            370H55V Level 4

            Theres' nothing on the vast majority of that site that requires PHP or any SSI. It looks like basic html content to me. SSI is for "interactive content" like mail forms, forums, logins etc. Basic "static" content doesn't need that so it is a bit of overkill to build php pages that would function just as well as straight html.

            • 3. Re: Newbee question - Headers Footer and menus
              John Waller Adobe Community Professional & MVP

              SSI is for "interactive content" like mail forms, forums, logins etc.

               

              SSI is for repetitive content: headers, footers, sidebars.

               

              One code snippet (the SSI) calls a HTML block of code which can be anything (e.g. header).

               

              The HTML block is a tiny text file which is easily updated. Once uploaded, the entire website reflects the updated content.

              • 4. Re: Newbee question - Headers Footer and menus
                370H55V Level 4

                OK but are we talking about milliseconds saved in load time over a CSS menu at 4G?

                 

                What's the purpose of building a "static" php page?

                • 5. Re: Newbee question - Headers Footer and menus
                  John Waller Adobe Community Professional & MVP

                  Seems to me we're discussing two different things here.

                   

                  We're not discussing load time. Just SSIs good or bad?

                   

                  SSI is for making repetitive page elements easier to manage. Thus it's good.

                   

                  PHP enables web designers to use SSIs (as do other server side methods) and, of course, enables dynamic pages.

                   

                  I don't see a 'dynamic' question in the OP's post. Just a question about SSIs and how best to implement headers, footers and menus.

                  • 6. Re: Newbee question - Headers Footer and menus
                    370H55V Level 4

                    I use SSIs for a number of things. I've just never used them for managing my layout or nav menus. The site in question is why I said what I did. It's static html, text and images. Not anything that would really require back end functions to display. Not that they couldn't be used for headers, footers and nav links, but it's not required to make them function any better than CSS or HTML.

                    • 7. Re: Newbee question - Headers Footer and menus
                      John Waller Adobe Community Professional & MVP

                      I use SSIs for a number of things. I've just never used them for managing my layout or nav menus.


                      I thought that was one of the primary uses of SSIs.

                       

                      I always use SSIs to manage headers, footers and nav bars. All sites benefit from SSIs, including the one linked in this thread.

                       

                      The site in question is why I said what I did. It's static html, text and images. Not anything that would really require back end functions to display. Not that they couldn't be used for headers, footers and nav links, but it's not required to make them function any better than CSS or HTML.

                       

                      It's far easier to maintain headers, footers and nav bars which are set up as Server Side Includes than those which are purely static or based on DW Templates or Library (which neither you nor me use).

                       

                      One tiny text file can control the nav bar for an entire website. Edit, upload and the entire website is updated within a minute.

                      1 person found this helpful
                      • 8. Re: Newbee question - Headers Footer and menus
                        VelocitySails Level 1

                        Thanks  for the quick replies.

                         

                        Now, I was just using the canvas site as an experiment.

                        And my question does not reallt relate to that site but more generically to the whole web design world.

                         

                        If you were to start a whole new site, that would have lots of content, what technology is the latest and best way of managing the properties i spoke of and would allow for easy modifications to the entire site by only editing once?

                         

                        Ashley 

                        • 9. Re: Newbee question - Headers Footer and menus
                          John Waller Adobe Community Professional & MVP

                          I think that's been answered: Server Side Includes.

                          • 11. Re: Newbee question - Headers Footer and menus
                            Nancy OShea Adobe Community Professional & MVP

                            I have read good and bad about SSI,

                             

                            You've been reading poor information.  Server-Side Includes are the best way to maintain consistent site wide headers, menus, and footers.

                             

                            With respect to your web page, you have some critical coding errors: missing Document Type Declaration on the first line of your markup.  Failure to include a DTD sends your pages into quirks mode which confuses browsers.

                             

                            Also your link to external style sheet is incorrectly placed after the </head> tag.  That needs to go between the <head> and </head> tags.

                             

                            You can read other error details below:

                            http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.canvasdoctors.com%2F

                             

                            Finally, when text size is increased in browsers (zoom, text only) Ctrl+++, your content spills out of containers and is unreadable.   Absolute positioning with explicit height values on containers are never a good primary layout decision.  Here's why:

                            http://apptools.com/examples/pagelayout101.php

                             

                             

                             

                             

                            Nancy O.
                            Alt-Web Design & Publishing
                            Web | Graphics | Print | Media  Specialists 
                            http://alt-web.com/
                            http://twitter.com/altweb