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.
- Show/Hide an example by clicking this
link
- By clicking the link, additional content can be shown or
hidden.
- There is no practical limit to the amount of
additional information that can be shown or hidden by
this feature.
- 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 |
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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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.?
- Answer
- 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.
- Answer
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?
- Answer
- 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?
- Answer
- Comments in CSS start with /* and end with */
- Comments in HTML start with <!-- and end with -->
- Single line comments in JavaScript start with //.
Any text on the same line after that point will be treated as a comment.
- 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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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?
- Answer
- 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.
<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?
- Answer
- 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.
-
Xx
xX
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.- Show me the HTML
-
<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>
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?
- Answer
- 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
- 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.
- Toolbar – The print friendly icon and
the Share This icon were made slightly larger to make them easier to
tap with a finger.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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?
- Answer
- 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.
|Support>Web Development Resources