Zuber Photographics Home

 

 

 

 

 

 

Panoramic

|Support>Web Development Resources

Web Development Resources

All web sites have one or more programming languages behind them (i.e. computer code).  Most of the code on this web site was written by myself.  However, for the more complex features, I relied on the following resources.
 

The third party product used by the search page was from DPA Software.  The product is called Site Search Engine.  Unfortunately, they no longer offer this product.  
I use JavaScript written by Mark Wilton-Jones for the collapsible lists, floating div elements and the swap style feature.  The swap style script is used by the Select Style drop down box in the upper left corner of each web page.  The collapsible list feature is demonstrated by the following link.
  1. Show/Hide an example by clicking this link
    1. By clicking the link, additional content can be shown or hidden.
    2. There is no practical limit to the amount of additional information that can be shown or hidden by this feature.
    3. Click the link again to hide this list.
Mark's web site
The code behind the Contact Us form is provided by Huggins' Email Form Script. Huggins' Email Form Script web site
The Share This widget can be found on many major news and entertainment websites.  Its purpose is to allow web site visitors to inform their social network contacts about a web site.  The Share This widget can be used to send an email, instant message, text message or to post a reference on a social network site. Share This widget
I use the Quick Menu product from Open Cube Inc. to create the drop down menus. Visual Quick Menu
My Hosting vendor, which I have been using since 2006, is HostGator.  I use one of their shared server plans. HostGator's web site


 


Web Development Notes

Below are some development concepts you may find useful.
 

Question.  When an image on a web page is printed, how does the browser know what size to print an image?

  1. Answer
    1. Unlike image editing software that uses the file's ppi to determine the size the image will appear on paper, the most common web browsers ignore a file's ppi.  Instead, they use a conversion factor of 96 ppi to determine print size.  For example, assume you have an image file whose dimensions are 300 pixels wide by 600 pixels high and whose file resolution is 300 ppi.  If you print this image from Photoshop, it will be 1 inch wide by 2 inches high on paper (300 pixels / 300 ppi = 1 inch).  However, if you display this image using a common web browser and print it, it will be 3.125 inches wide and 6.25 inches high on paper (300 pixels / 96 ppi = 3.125 inches).

     

Question.  GIF or PNG-8 or PNG-24 or JPEG.  Which image file format should be used on the web?

  1. Answer
    1. I use GIF for animations and very small graphics, such as the Photoshop tool icons.  PNG-8 is used for larger graphics, such as buttons, screen captures, etc.  JPEG is used for photographic images.  PNG-24 is not used because of limited web browser support.  You can read more about these file formats on the File Format page.

     

Question.  PNG-8 is suppose to have better file compression than GIF.  So why not use PNG-8 for all graphics?

  1. Answer
    1. When working with very small files, GIF compression can actually result in a smaller file size and higher quality image than PNG-8.  So when preparing a graphic for the web, I use Photoshop's Save for Web & Devices feature.  I first select GIF, note the resulting file size and quality.  And then I select PNG-8.  Whichever format results in the higher quality image is the format the graphic will be created in, regardless of file size.

     

Question.  When printing a web page, why is the browser no longer using my CSS?

  1. Answer
    1. Within your HTML, look at the declaration for the location of your CSS file.  Specifically, see if it has the media attribute.  And if so, check to see if the media attribute is set to screen, as shown in the following example.

      <link rel="stylesheet" type="text/css" media="screen" href="/css/main.css" />


      A media value of screen will cause the browser to not use the CSS file specified in the href attribute when printing the web page.

     

Question.  Which font should be used on a web site?

  1. Answer
    1. There are many references that discuss font usage on the Internet.  So I will not repeat all their advice and suggestions.  The general guidelines are to use a font that comes standard on both Windows based computers and Mac computers.  And when coding the font family in your CSS, specify at least three fonts.  The first would be a standard font family found on the operating system most commonly used by your web site visitors.  The second font family is for the second operating system.  And the third is the generic equivalent.  The typical generic font would be sans-serif or serif.  Here is my font family specification for my print friendly pages; font-family:"Times New Roman", Times, serif;.  Times New Roman is a standard font on Windows based computers.  Times is a common font on Mac computers.  And serif is the generic equivalent on both operating systems.  Fonts that are considered safe for Windows, Mac and Unix operating systems are Arial, Helvetica, Times New Roman, Times and Courier New.  Courier New is a monospace font and is not commonly used in web pages.  The fonts I use on my web site are also TrueType fonts.  TrueType fonts are fonts that scale (resize) cleanly and provide consistency between screen and print.  Arial, Helvetica, Times New Roman, Times and Courier New are all TrueType fonts.

     

Question.  Which font size unit of measure should be used on a web site – point, pixel, percent, em or those words medium, x-small, etc.?

  1. Answer
    1. There is probably more discussion on font sizes than there is on font family.  In fact, point, pixel, percent, em and the size keywords are not all the possible font sizes.  But I will limit my discussion to these.  Point is for printing.  Therefore, it would be appropriate for a print friendly web page to specify font size in points.  Since computer monitors display in pixels, using pixels will give you exact control over size.  Percent and em are cascading fonts and can be very useful to web developers who understanding the concept of cascading font sizes.  Given the choice between percent and em, I would use em.  Which ones do I use?  I use them all except percent.  On my print friendly pages, I use point.  On the other web pages, what I use depends on you.  In the upper left corner of each web page is a drop down box where you can select font size.  If you select small, medium or large, my assumption is that you want me to control font size so the font size will be in pixels.  If you select browser controlled, my assumption is that you want your browser defaults to rule.  So I set the main text to 1 em and the other sizes are controlled by the keywords Small or Large.  This web site defaults to browser controlled.

     

Question.  Where is that extra space on the web page coming from?  These spaces are not in the HTML.

  1. Answer
    1. You can think of HTML elements as block or inline.  A web browser will display block elements on a line by themselves.  A paragraph is a block element.  A web browser will display inline elements side by side.  Text and images are inline elements. A web browser may automatically insert a space between inline elements depending on how your code is formatted.  For example, if you have the following.

      • <p>The quick brown fox jumped
      • over the lazy dog.</p>
         

      The web browser will automatically insert a space after the word 'jumped' when displaying this paragraph on a computer monitor or printing it on paper.  This is good.
       

      And if you have the following code.

      • <p><img ... src="images/pic1.jpg" />
      • <img ... src="images/pic2.jpg" />
      • <img ... src="images/pic3.jpg" />
      • <img ... src="images/pic4.jpg" />
      • </p>
         

      The web browser will also automatically insert a space after each image because an image is an inline element.  This is usually what you want.  But if you do not want the web browser to automatically insert a space, you will need to change your code so the line of code breaks within a tag.  See the example below.  The ellipsis … represents the additional attributes that should be coded with any <img> tag.

      • <p><img ... src="images/pic1.jpg"
      • /><img ... src="images/pic2.jpg"
      • /><img ... src="images/pic3.jpg"
      • /><img ... src="images/pic4.jpg"
      • /></p>
         

      This code explicitly tells the web browser there are no characters between the ending of one inline element and the beginning of the next.  The above code is not a hack.  It is perfectly fine HTML code and will pass the W3C Quality Assurance Mark Up Validator once you add your additional attributes.


     

Question.  Some of my web page text is not displaying or printing.  Why?

  1. Answer
    1. There are a number of reasons why entire letters or part of a letter is missing.  Here are just a few.
      • Use of italics.  Italics are generally not used in web pages, but if you are using them, the italics could be forcing the text further to the right than the block element it is in will allow.
      • Using floats.  Make sure the sum total of the element widths, borders, margins and padding is equal to or less than the width allowed by the block element the floating elements are in.
      • Using italics inside floating elements.
      • Fonts, especially fonts that are not TrueType, may have one typography width for computer monitors and a different typography width when printed on paper.  This difference could be forcing the text beyond its allowable HTML element width.  Consider using TrueType fonts.

     

Question.  How do I code comments in CSS, HTML and JavaScript?

  1. Answer
    1. Comments in CSS start with /* and end with */
    2. Comments in HTML start with <!-- and end with -->
    3. Single line comments in JavaScript start with //.  Any text on the same line after that point will be treated as a comment.
    4. Multi line comments in JavaScript start with
      /* as the first two characters
      in front of the comments
      and end with */

      as the last two characters.  Any text between these characters will be treated as a comment.

     

Question.  Why is onmouseover not working with the input tag?

  1. Answer
    1. Onmouseover is often used with the input tag when you are using your own button image instead of using the default submit and reset buttons.  The problem with onmouseover not working with an input tag is usually caused by one of the following; either the id reference cannot be resolved, or the id references do not match, or id reference is not being used properly, or you are using a touch based user agent, such as the iPad.  For the latter, you will need to add onclick events to your web page.

      To ensure the id reference can be resolved, be sure to use the getElementByID method.  Do not try and reference the input object directly.  See the example below.

      <input id="imgSubmit" type="image" src="images/Submit.png" . . .
      onmouseover="document.getElementById('imgSubmit').src='images/SubmitHover.png';" <!-- this is correct -->
      onmouseover="imgSubmit.src='images/SubmitHover.png';" <!-- this is incorrect -->



      To ensure the id references match, make sure the spelling of the input id exactly matches the input variable used in the getElementById method.  This is shown in red in the code below.

      <input id="imgSubmit" type="image" src="images/Submit.png" . . .
      onmouseover="document.getElementById('imgSubmit').src='images/SubmitHover.png';" <!-- this is correct -->
      onmouseover="document.getElementById('imgsubmit').src='images/SubmitHover.png';" <!-- this is incorrect -->



      Be sure you are using the id attribute and not the name attribute.  The getElementById('value') is getting the internal reference identifier of an element whose id, not name, is equal to the specified value.  This is why it is called get-element-by-id and not get-element-by-name.  But if your HTML form requires the use of the name attribute, then use both id and name.  See the examples below.

      <input   id="imgSubmit" type="image" src="images/Submit.png" . . . <!-- this is correct -->
      <input name="imgSubmit" type="image" src="images/Submit.png" . . . <!-- this is incorrect -->
      <input id="imgSubmit" name="imgSubmit" type="image" src="images/Submit.png" . . . <!-- this will also work -->

      onmouseover="document.getElementById('imgsubmit').src='images/SubmitHover.png';"


     

Question.  How do I get rid of the dotted outline around my linkable objects?

  1. Answer
    1. To the <a> tag that wraps around the object and makes it linkable, add the following inline styling, style="outline:none;".  Or, in your web site's style sheet, add a { outline:none; }.  This will take care of it throughout your entire web site.

     

Question.  What is preloading images and why is it done?

  1. Answer
    1. Before a web browser can display a web page to you, it must retrieve the web page's content from the web server.  This content can consist of text, images, HTML forms, etc.  Not all images are retrieved when the page is first displayed.  For example, if an image will only be displayed during a mouse over event, the web browser will not retrieve the image until the mouse over event occurs.  This could be an issue if the mouse over event is the clicking of a button.  Your web site visitor may click the button and leave the page before the browser can retrieve the other image.  To mitigate this, you can require the browser to retrieve these images as part of the initial display of the page.  But you want to achieve this in such a way that the browser retrieves the image, stores it in its cache but not display it until needed.  This can be accomplished with many techniques.  The one I prefer is shown below.  It is a simple <div> tag that can be placed almost anywhere in the <body> section of your HTML.  The inline style of display:none; prevents the images from being shown at the location of the <div> tag.

      • <div style="display:none;">
      •     <img . . . src="images/pic1.jpg" />
      •     <img . . . src="images/pic2.jpg" />
      •     <img . . . src="images/pic3.jpg" />
      • </div>

     

Question.  How do I create a style element using JavaScript?

  1. Answer
    1. An example of the code I developed to create a style element using JavaScript is shown below.  I have used this code with IE6, IE8, Firefox and Safari.

      <head>
      <script type="text/javascript">
      <!--
      function fCreateElement ()
      {
      if (!document.createElement) { return; }  // user agent cannot create element? exit
      if (!document.createTextNode) { return; } // cannot create text node? exit
      if (!document.getElementsByTagName) { return; } // cannot get a tag? exit

      var vElement = document.createElement('style'); // create style element
      vElement.setAttribute('type', 'text/css');      // set its type
      // Note: per W3C standards, id is not an attribute of the style element

      // create the style properties
      var vText = '.myClass'
                + ' {'
                + ' color:white;'
                + ' background-color:black;'
                + ' }';

      if(vElement.styleSheet)    // does the user agent see your element as a style sheet?
         { // IE does
         vElement.styleSheet.cssText = vText; // replace the styling in the new element
         }
      else
         { // other browsers do not
         vElement.appendChild(document.createTextNode(vText)); // add the styling to the new element
         }

      var vHead = document.getElementsByTagName("HEAD")[0]; // style elements go in the head, not body
      vHead.appendChild(vElement); // style element is now ready to use
      };
      // -->
      </script>

      <script type="text/javascript">
      <!--
      fCreateElement();   // you can execute the function from within the head or body
      // -->
      </script>
      </head>

      <body class="myClass">
      </body>


     

Question.  How do I include the single quote or the forward slash in a JavaScript string?

  1. Answer
    1. These characters must be preceded by the back slash escape character.  The escape character tells JavaScript that the next character is to be treated as text and not a delimiter.

      The following code will not work as expected.
      alert('Don't forget to code the </script> ending tag');

      It has to be coded as follows.
      alert('Don\'t forget to code the <\/script> ending tag');

     

Question.  I am using JavaScript to create HTML.  How can I see what HTML is actually being created?

  1. Answer
    1. As you have probably learned, HTML created by JavaScript during run time cannot be seen when you use View > Source in your web browser (user agent).  However, you can use JavaScript to show the created HTML as a text string on your web page for debugging purposes.  Below is the JavaScript that I coded to accomplish that.  Please note that some user agents may capitalize tags even if you create them lower case. For example, you may create <div> but the text string that is written to your web page may display <DIV>.

      Also, the HTML that will be displayed will not necessarily be the exact HTML your JavaScript created.  It will be the HMTL as it was resolved by the user agent.  For example, if your JavaScript generated invalid HTML that was ignored by the user agent, this HTML will be dropped when written to the DOM.  Therefore, it will not be part of the innerHTML property and will not be shown as part of the text string displayed on your web page by the JavaScript below.  But I consider this a good thing because what you want to see is the code written to the DOM, not a repeat of your JavaScript text string.

      Remember to remove this code before making your web page available to your web site visitors.

      <body>
      <script type="text/javascript">
      <!--
         // your JavaScript that creates the run time HTML goes here
         // and should write its generated HTML to the target div
      // -->
      </script>

      <div id="target"></div>

      <div id="ShowMe"></div>

      <script type="text/javascript">
      <!--
         var vHTML = document.getElementById('target').innerHTML; //get the HTML
         var vText = document.createTextNode(vHTML); //turn it into plain text
         document.getElementById('ShowMe').appendChild(vText); //place it on the web page
      // -->
      </script>


      You could also use the alert command to display the variable vHTML.  However, I prefer writing the text to a web page so the entire page can finish rendering.  It also allows me to copy the text if needed.

     

Question.  How do you center text in HTML?

  1. Answer
    1. There are two types of text centering.  Centering horizontally from left to right.  Centering vertically from top to bottom.  Both types of centering require an understanding of the parent container concept and the difference between block elements and inline elements.

      The information in this section has been successfully used in IE8, FireFox 3.5 and Safari.

      Block And Inline Elements
      Web browsers will display block elements on a line by themselves unless told to do otherwise.  The paragraph element <p>, division element <div> and the line element <li> are some of the block elements.

      A web browser will display inline elements side by side.  The anchor element <a>, span element <span> and the table cell element <td> are some of the inline elements.  By default, these inline elements are only as wide as the text they contain. 

      Parent Container
      Anything you see on a web page is inside some element.  For example, the text you are reading is inside a line element <li> which is inside an ordered list element <ol> which is inside more elements which are inside the body element.  Like the text on this web page, the text you are trying to center will be inside a hierarchy of elements.  Each element in the hierarchy of elements the text is in is called a parent container or parent element.  When you are centering text, your web browser will center the text within the width of the most restrictive parent element.  The browser does not try to center text within the web page or the computer monitor screen.  If you want the browser to center your text within the web page or screen, you must make the width of the most restrictive parent element as wide as the web page or screen.

      For example, while the span element below is in a paragraph block element and is coded to center horizontally, a span element is only as wide as it's content.  Consequently, the most restrictive parent element for the text is the span element itself.  Therefore, the text can only be centered within it's own width.  This results in the text-align:center; property having no effect.

      Where am I?

      <p><span style="text-align:center; color:red;">Where am I?</span></p>


      Let's make one small change to the code.  By moving the text-align property to the paragraph element, the web browser will now center the contents of the paragraph element within the width of the paragraph.  Since the paragraph element is a block element, this centers the text over the full width of the paragraph.

      Where am I?

      <p style="text-align:center;"><span style="color:red;">Where am I?</span></p>


      Horizontal Centering Using The text-align Property
      Horizontal centering is easier than vertical centering.  To center text left and right in a block element, such as the paragraph element <p> or the division element <div>, use the text-align:center; property as shown in the example above.

      Horizontal Centering In A Table Cell
      To center horizontally in a table cell, you use the same text-align:center; property.  However, since a table cell element <td> is an inline element, you must increase the table cell's width to cover the area you want the text to be centered.  The code below has the centering property, but without changing width, there is no space for the web browser to center the text.

      Cell 1 Cell 2 Cell 3 Cell 4

      <table style="text-align:center;" cellspacing="0">
      <tr>
      <td style="border:1px red solid;">Cell 1</td>
      <td style="border:1px red solid;">Cell 2</td>
      <td style="border:1px red solid;">Cell 3</td>
      <td style="border:1px red solid;">Cell 4</td>
      </tr>
      </table>


      The code below has the width property added.  Note there is a width property for the table element and a width property for the table cell element.  In this example, the table width property is telling the browser the table is to take up the full width of its parent container.  The table cell width property is telling the browser how much each cell is taking up within the table.

      Cell 1 Cell 2 Cell 3 Cell 4

      <table style="width:100%; text-align:center;" cellspacing="0">
      <tr>
      <td style="width:25%; border:1px red solid;">Cell 1</td>
      <td style="width:25%; border:1px red solid;">Cell 2</td>
      <td style="width:25%; border:1px red solid;">Cell 3</td>
      <td style="width:25%; border:1px red solid;">Cell 4</td>
      </tr>
      </table>


      Vertical Centering Using The line-height Property
      If you have a single line of text you wish to vertically center, this can be accomplished by making the height and line height properties of the parent element the same.  This technique is only reliable when used with a single line of text.

      Single line of text

      <p style="height:50px; line-height:50px;">Single line of text</p>


      If you also want to horizontally center the text, add the text-align:center; property.  In the example above, the border property is not shown.

      Vertical Centering Using The vertical-align Property
      Vertical centering is more difficult to code because vertical centering is not consistently supported across web browsers.  But there is one element that automatically vertically centers text and is supported by all major web browsers.  That element is the table cell element <td>.  And the additional good news is that you do not have to put your text in a table cell for the browser to treat the containing element as a table cell.  However, you still have to give the containing element some height for text to be centered within.

      The first example below was created using the table cell element.  Note how the web browser vertically centers the text without having to be told to do so.  The second example was created using the paragraph element <p> and telling the web browser to treat it as a table cell.

      Vertigo

      <table>
      <tr>
      <td style="width:100px; height:75px;">Vertigo</td>
      </tr>
      </table>


      Vertigo

      <p style="width:100px; height:75px;
      display:table-cell; vertical-align:middle;">Vertigo</p>


      If you also want to horizontally center the text, add the text-align:center; property.

     

Question.  How do you center HTML elements?

  1. Answer
    1. In this section, we will discuss centering block elements, such as the paragraph element <p> and the division element <div>.  We will also discuss centering images.  How to center text is answered in the previous question.

      The information in this section has been successfully used in IE8, FireFox 3.5 and Safari.

      Horizontally Centering Block Elements Using The margin Property
      By definition, a block element wants to consume the entire width of it's parent container.  Therefore, to center a block element, two things have to be done.  The element to be centered has to be given a width that is less than the space it is to be centered within.  If this is not done, then the element does not have any room in which to be centered.  Likewise, the parent container of the centered element must have a width that is wider than the centered element.  This creates the space the element is to be centered within.  For comparison, if I take a liquid and pour it into a container, the liquid will take up the entire width of the container.  Consequently, it would be impossible to center the liquid within its container.  However, if I take a small box and place it inside a larger box, then I could center the small box within its larger container.  Taking this concept to a web page, I have to ensure the block element I want to center is smaller than it's parent element.

      Once that is done, then you tell the browser to center the element.  This is accomplished using the margin property.  The margin property tells how much space is to be on the outside of an element.  You can have margins on the top, bottom, left and right sides of an element.  To horizontally center an element, you tell the browser to make the left and right margins equal.  This is done using margin:0px auto;.

      <div><div style="width:50px; height:50px; margin:0px auto;
      border:1px red solid;"></div></div>


      In the example above, the margin 0px tells the browser there are no top and bottom margins.  (If you want top and bottom margins, specify a number other than zero.)  Auto tells the browser to make the left and right margins equal.  The outer div element is the parent container and creates the space for the inner div element to be centered within.  The margin auto property centers the inner div element within the outer div element.

      One might assume that if you used margin:auto 0px; that it would vertically center the element.  Unfortunately, this is not true.

      Vertically Centering Block Elements
      As explained in text centering, vertical centering is more difficult to code.  I implement vertical centering by formatting the parent element as a table cell.  An element formatted as a table cell automatically vertically centers it's contents.  An example of how this is done is shown below in the Putting It All  Together section.

      Centering - Putting It All Together
      In the example below, the image's center is aligned with the text.  The image and text are both horizontally and vertically centered within the rectangle.  The rectangle is horizontally and vertically centered within the square.  And the square is horizontally centered within the text area of this web page.

    2. Xx Centered Image xX


    3. To see the HTML that created the example above, click the Show Me link below.  The example uses inline styling so you can see exactly what properties are associated with which elements.  You will want to use CSS styling wherever you can.
    4. Show me the HTML
      1. <div id="div01">
        <div id="div02" style="width:200px; height:200px;
             margin:0px auto; border:1px red solid;">
        <div id="div03" style="width:200px; height:200px;
             display:table-cell; vertical-align:middle;">
        <div id="div04" style="width:150px; height:100px;
             margin:0px auto; border:1px red solid;">
        <p style="width:150px; height:100px;
           text-align:center; display:table-cell;
           vertical-align:middle;">Xx
           <img alt="Centered Image" src="/images/pic01.gif"
              style="width:50px; height:50px;
              vertical-align:middle" />
        xX</p>
        </div>
        </div>
        </div>
        </div>


      2. Div element 01, which cannot be seen, creates the horizontal space the square is to be centered within.  Because div 01 is a block element, it will take up as much horizontal space as it's parent element will allow, which is what we want.

        Div element 02 is the red square.  The margin auto property horizontally centers div 02 within div 01.

        Div element 03 cannot be seen and is the same size as div 02.  It is formatted as a table cell so that it's contents will be vertically centered.

        Div element 04 is the red rectangle.  Because it's parent element, div 03, is formatted as a table cell, div 04 is automatically vertically centered by the browser.  The margin auto property of div 04 is what horizontally centers it within div 03.

        The paragraph element, which cannot be seen, is the same size as div 04 and is also formatted as a table cell so that the text and image within the paragraph will be vertically centered.  The text-align:center; property horizontally centers the text and image within the paragraph.

        The vertical-align:middle; property of the image aligns the middle of the image with the text on either side of it.

     

Question.  What changes were made to make this web site iPad ready?

  1. Answer
    1. The iPad's native resolution is 1024x768.  Since my web site was originally designed for a 1024 width, I did not have to make any drastic layout changes.  But listed below is a list of the changes I did make.  Show the changes
      1. Main Menu – The main menu was originally beneath the panoramic image.  I moved it above the panoramic to give more room for the drop down menus.
         
      2. Toolbar – The print friendly icon and the Share This icon were made slightly larger to make them easier to tap with a finger.
         
      3. Footer – Additional space was added between the links in the web page footer to make them easier to tap with a finger.  The copyright years 2004-2010 were being interpreted as a phone number by the iPad and the iPad was making them a link so you could add it as a contact.  I added a space to either side of the dash, as shown here 2004 - 2010, so the iPad would not interpret it as a phone number.
         
      4. mouse events – Several of the web pages use the onmouseover event to trigger an action.  Since the iPad is a mouse less device, mouse events have no meaning.  Therefore, to each mouse event, I added an onclick event.  This provides complete functionality to both standard computers and the iPad.
         
      5. Layout – Safari on the iPad behaves differently that browsers do on standard computers.  A browser on a standard computer will display a web page according to the width dimension specified by the web site.  Safari on the iPad will either enlarge or reduce a web page to make it fit the width of its screen.  For the ZuberPhotographics web site, this means the web site is enlarged when viewed in landscape mode and reduced when in portrait mode.  I noticed that during this resizing, some of the layout div elements were being separated from each other, creating a very small gap between them.  This gap caused the background color to show through, giving the impression these div elements had a border.  To resolve this, I wrapped the individual layout div tags inside an outer div tag and gave the outer div tag a background color to match the layout div tags.  In this way, even though the small gaps between the layout div tags are still there, they are invisible to the viewer.
         
      6. Downloads – Safari on the iPad prohibits the saving of the files I make available for download.  This is really not an issue for this web site since these downloads are meant to be used with Adobe Photoshop, which does not run on the iPad.  But to prevent user frustration, I created special CSS classes to remove the download links from the download page when the web site is viewed on the iPad.  In addition, a special reminder is displayed to iPad users stating the download files should be downloaded on a standard computer.
         
      7. Videos – Safari Quick Time on the iPad provides a feature were you can expand the video to watch it full screen.  Also, when the Quick Time player first starts, the player controls are displayed.  Once the video plays, the controls disappear.  Typically you mouse over the video to redisplay the controls.  Since the iPad is a mouse less device, to redisplay the controls you have to tap the playing video.  Therefore, I added text to the video window to remind users to tap the video to redisplay the Quick Time controls.  This text also reminds the viewer of the full screen option.
         
      8. Printing – As of this writing, the iPad provides very weak support for printing.  So while the print friendly pages are available on the iPad, you will not be able to print them easily.
         
      9. Top of Page Navigation – Users of my web site know that because of the nature of the content, a web page can be very long and they use the Back to Top link conveniently located in the bottom left corner of each web page to get back to the top of the web page.  This link 'magically' stays in the same bottom left location regardless of vertical scrolling because of its position:fixed; attribute.  Unfortunately, fixed positioning is not supported by the iPad (in my opinion).  The iPad, and certain other devices, use a technology called a view port to display a web page to you.  The iPad view port is what allows you to 'pinch' a web page to zoom out or 'stretch' it to zoom in.  Because of these dynamics, fixed positioning cannot be supported.  Therefore, to prevent user frustration, I use special CSS classes to hide fixed positioned objects on the iPad.  But the good news is it is easy to go to the top of the page on any web site with the iPad.  Just tap the top of the Safari browser bar.
         

        Tip

        Remember to tap the iPad Safari browser bar to return to the top of the page.

         


     

Question.  Some of your web pages and code do not work with IE6.  Do you support IE6?

  1. Answer
    1. As of 2010, I no longer test my web site or code using IE6.  This can be interpreted as I no longer support IE6.  According to my interpretation of the Microsoft web page http://support.microsoft.com/gp/lifesupsps/, Microsoft discontinued mainstream support for IE6 in July 2010 but will continue extended support till April 2014.

      But regardless of Microsoft's support time line, Microsoft is a for-profit company and my web site is not.  I already spend more time coding my web site than I do writing content.  A fact I wish to reverse.  Therefore, I have to decide how I want to spend my time.  I already spend a lot of time resolving differences between IE8 and the other browsers I support (FireFox and Safari).  I have decided to no longer spend time resolving differences between IE6 and IE8/FireFox/Safari.

      There is the noble philosophy that a web site visitor should be able to use the browser of their choice to view your web site.  During August 2010, according to my web site metrics, I still had visitors using IE4.  That is correct, IE4.  Then there is the practical side and cost of web site development.  How much time, effort and money does a web site developer spend supporting all browsers and all versions of browsers?  My answer is you cannot support them all unless you want a plain text web site.  Each web developer has to make their own decision between browser support and an easily maintained, feature rich site.