FunkyTower » PHP http://www.davidcrandall.com A great source for tech news, tech help, tech info, and quality web design solutions Tue, 18 Aug 2009 08:38:50 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Website Performance Tips pt. 2: CSS, Validation, Multiple Browsers, and Image Optimization http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-2-css-validation-multiple-browsers-and-image-optimization/ http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-2-css-validation-multiple-browsers-and-image-optimization/#comments Fri, 08 Aug 2008 02:18:50 +0000 David http://funkytower.com/?p=270 Welcome to part 2 of this article!

So now that we’ve covered templating in our last tutorial, here are some other tips for making your webpage move faster.

  1. Use External CSS Documents:  Rahter than implamenting your CSS into the HEAD of your local document,  link your webpage to an external CSS document.  Do this by templating your CSS in the header like normal, making sure you have the webpage looking like it should.  Then copy all the CSS code into a new notepad document and save it as “styles.css” After that, erase the CSS from the HEAD of your webpage and replace it with “<link rel=’stylesheet’ href=’styles.css’ type=’text/css’ media=’all’ />Doing this keeps browsers from having to load the same stylesheet over and over by allowing it to store one stylesheet file to reuse.
  2. Validate your CSS:  Go to http://jigsaw.w3.org/css-validator/ and have your stylesheet(s)/webpage(s) validated.  If you have ANY errors in your CSS, fix them.  Browsers like IExplorer fix some CSS issues to make the webpage look like it’s supposed to, which can cause your website to move slower for alot of users.  Also it can keep your website from looking right in 3rd party browsers, like FireFox (of course, FireFox is so huge right now I don’t think I should be calling it 3rd party :) )
  3. Validate your HTML:  Go to http://validator.w3.org/ and have your webpage(s) validated.  If there are any errors, FIX THEM.  This will help users from all different browsers to see the website as it is meant to be, giving them a pleasant and enjoyable experience.
  4. Adding to other browsers, test your website in multiple browsers like IExplorer, Firefox, etc.  Different browsers decode websites differently, therefor they display them differently.  To improve your websites performance, fine-tune your code so that it is compatible with major browsers so that it looks and feels beautiful :)
  5. Finally, make sure your content’s filesizes aren’t too big.  For example, if you have alot of pictures in your web page, lower the quality just a little bit, and (if possible) make them smaller in dimension.  The less a web browser has to load, the quicker your website will move.

If you have followed all these steps, you should have a smooth, sleek, multi-browser compatible, user-friendly website.  :)

 

What Do You Think?
Did these tips help you to build a smooth running website?  Do you have questions about web design?  Do you have any other ways to boost a website’s performance?  I want to know what you have to say – I would love to share your information with the world here at FunkyTower!  Send me an e-mail at david@funkytower.com :)   I hope to hear from you soon!

 

Take it easy,
David Crandall

]]> http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-2-css-validation-multiple-browsers-and-image-optimization/feed/ 1 Website Performance Tips pt. 1: Templating http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-1-templating/ http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-1-templating/#comments Fri, 08 Aug 2008 02:18:13 +0000 David http://funkytower.com/?p=267 Do you have a website, blog, or message board online?  Designing it yourself?  Awesome!  That’s really wonderful to hear!  What’s that?  You say your website moves slowly compared to other websites with just as much, if not more content?  Well here are some tips to get your website running smoothely and quickly!

Templating/Dividing with PHP:  Though sometimes a little bit of a hassle to set up, it’s well worth it in the end.  It’s really not that hard, and it doesn’t require very much knowlege of PHP programming, either. 

In most websites, the only thing that changes is the body of the web page; the header, footer, and sometimes even a sidebar, all stay the same.  Instead of a browser constantly having to reload the same thing on different page do this:

Create a full webpage template containing your header, a place for your main content, and your footer.  Include a sidebar if desired.

Use footnotes to lable the beginning and end of the different areas of your website.  To see an example, view the source of this website.  I left the footnotes in here to show how I templated this website. 

OR, here’s a little tutorial for you which I’ll be the code I copied straight from my template (without the CSS.) 

1.  First, and paste it into a text editor or your web design software like Dreamweaver, then save it as sample.html:

  • HTML CODE:
    <!– Start Header –>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>FunkyTower</title>
    </head>
    <body>
    <div id=”templateheader”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ id=”backhead”>
      <tr>
        <td><div align=”center”>
          <table width=”1000″ border=”0″ cellspacing=”0″ cellpadding=”0″ id=”header”>
            <tr>
              <td valign=”bottom”><table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″ id=”navbar”>
                <tr>
                  <td><a href=”http://www.funkytower.com” class=”navbar”>Home</a></td>
                  <td><a href=”http://www.funkytower.com/webdesign” class=”navbar”>Web Design</a></td>
                  <td><a href=”http://www.funkytower.com/about” class=”navbar”>About</a></td>
                  <td><a href=”http://www.funkytower.com/contact” class=”navbar”>Contact</a></td>
                  <td><a href=”http://www.funkytower.com/faq” class=”navbar”>FAQ</a></td>
                </tr>
              </table></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table>
    </div>
    <div align=”center”><br />
      <!– End Header –>
     
      <!–begin body –>
      <br />
    </div>
    <table width=”1000″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ id=”contentholder”>
      <tr>
        <td><div align=”center”>
          <table width=”935″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”contentholder2″>
            <tr>
              <td align=”right” valign=”top”></td>
              <td align=”right” valign=”top”></td>
            </tr>
            <tr>
              <td width=”581″ valign=”top”><div align=”center”>
                <table width=”565″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″ id=”contentmiddle2″>
                  <tr>
                    <td id=”contentheader”>&nbsp;</td>
                  </tr>
                  <tr>
                    <td id=”contentmiddle”><div class=”content” id=”content”>
                      <h1>Welcome</h1>
                      <p>Hello and Welcome to FunkyTower! </p>
                      <p>Have a great day!<br />
                        <a href=”mailTo:david@funkytower.com”>Linke Test</a></p></div></td>
                  </tr>
                  <tr>
                    <td id=”contentfooter”>&nbsp;</td>
                  </tr>
                </table>
              </div></td><!– End Body –>
              <!– Start Sidebar–>
              <td width=”354″ valign=”top”><table width=”327″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″ id=”sidebartable”>
                <tr>
                  <td valign=”top”><p align=”right”>
                    <input name=”s” type=”text” id=”s” value=”" size=”30″ class=”searchbar” />
                    <input type=”submit” id=”searchsubmit” value=”" class=”search” />
                    </p></td>
                </tr>
                <tr>
                  <td valign=”top”><div id=”sidebar” class=”sidebar”><img alt=”" src=”images/archivestitle.jpg” width=”327″ height=”58″ />
                    <ul>
                      <li>July 2008</li>
                      <li>August 2008</li>
                      <li>September 2008</li>
                    </ul>
                    <img alt=”" src=”images/categoriesheader.jpg” width=”327″ height=”59″ />
                    <ul>
                      <li>Category 1</li>
                      <li>Category 2</li>
                      <li>Category 3</li>
                      <li>Category 4</li>
                      <li>Category 5</li>
                      <li>Category 6</li>
                    </ul></div></td>
                </tr>
              </table></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table>
    <!– End sidebar –>
    <!– Begin Footer –><br /><br />
    <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footercontainer”>
      <tr>
        <td><div align=”center”>
          <table width=”935″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footer”>
            <tr>
              <td width=”468″>Stuff and more stuff will go here</td>
              <td width=”467″>Then we’ll have more stuff right here as well!</td>
            </tr>
            <tr>
              <td colspan=”2″><div align=”center” class=”credit”>Blah blah</div></td>
              </tr>
          </table>
        </div></td>
      </tr>
    </table>
    </body>
    </html>
    <!–End Footer–>

So you can clearly see where each section starts and ends. 

2.  The next step is to divide the template into four PHP documents: header.php, body.php, sidebar.php, and footer.php

To do this, Highlight, rightclick, and cut  All the code from “<!–Start Header–>” to “<!–End Header–>”
Paste the code into a new document in notepad and save it as “header.php”

3.  Next, cut all the code from <!–begin body–> to <!–End body–>
Paste this code into a NEW document in notepad and save it as “body.php”

4.  Do the same steps for the sidebar and the footer, naming them “sidebar.php” and “footer.php”.

Now you should have four separate documents for your template: header.php, body.php, sidebar.php, and footer.php
These files must all be in the same folder.

Now all that’s left to do is create a PHP file that calls all your other php files to form one page using <?php require( ) ?>

 

5.  Open up a new notepad document and paste the following code into it:


  • <?php require(‘header.php’) ?>
    <?php require(‘body.php’) ?>
    <?php require(‘sidebar.php’) ?>
    <?php require(‘footer.php’) ?>

6.  Save it as “test.php” to the same folder location/directory as you did all the other files, or upload all the files to one folder/directory on your server.

That’s it!  Now you should have a full web page that looks just like the “template.html” file we made!  Using this method will allow your visitors to only have to load your header, footer, and sidebar just one time! 

Now, If you want to make different web pages, copy your “body.php” file and change  the content within it, and save it as a new php file like content1.php.  Then, take your “test.php” change ‘body.php’ to ‘content1.php’ and save the document as “page1.php” or “index.php” :)

On top of making your website load faster, this also allows editing to be alot simpler.  Say you made a new page and had to edit the sidebar or header so that you could add a link to that page.  Well, instead of editing SEVERAL pages to have the same effect, you just have to edit one, and it effects ALL your web pages! :)   Cool, huh?

 

What Do You Think
Did this tutorial help you?  Did you learn something new?  Have more tips to make your website run smoother and faster?  Still need help?  Let me know!  Send your questions and knowlege to david@funkytower.com! I look forward to hearing from you :)

Continue on to Part 2 for more tips on how to make your website move fast and smooth.

]]> http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-1-templating/feed/ 1