Compatibility

Introduction

As we know, many iWeb users are not aware of compatibility issues on cross-platforms. Even though we are Macintosh users, majority of internet users are using Microsoft windows. In addition, there are many web browsers such as Safari, Firefox, Internet Explorer, Chrome, Opera, and so on. It is highly recommended to test your website on all platforms because each platform (browser) interpret HTML code as well as scripts by a bit different way. Since iWeb is created by Apple Inc., iWebsite is nearly 100% compatible with Safari. However, your site will look different on other web browsers.

It would be quite time-consuming job for you to verify your website on those all listed web browsers, and even in windows platform. To save the time, I would recommend to test at least on Safari, Firefox, and IE. Unfortunately, iWebsites is not very friendly with windows platform as well as IE, however many people are still using IE as their primary web browser. If you have never browsed your site on IE, you may be very surprised. It may look very weird and seem very slow. Don't forget your targets have diverse system environments. Your site you see in your computer is NOT SAME-LOOKNG with others. To increase compatibility with other systems, we recommend to go through these lists below.

Compatibility issue notes

We summarized some issues that you should avoid or fix here. You can also acknowledge them from Tips & Tricks section.

What should be avoided

• A big problem of Shadow effects in some browsers
  iWeb provides easy but great tools to handle images such as stroke, shadow, reflection, opacity and so on... However, some of them may cause some problems on specific browsers. In particular, shadow effect will let your image look very weird on Firefox, and IE. That's why I have never used this effect for images, instead of iWeb imaging tool, I manipulate images on Photoshop CS.
  If you apply "shadow effect" to the PNG file including transparent areas, Firefox & IE will present the image like the below example. (Safari is OK)
  
  Don't check on Shadow Effect for an image which has transparent areas like PNG, and TIFF. It will look terrible. The entire rectangle area will be shadowed, not an actual image area. In addition, don't apply Shadow effect to specific shapes except for Rectangle. The shadowed shapes will look very weird as well. Instead of iWeb imaging tool, I would recommend to use Photoshop Layer style (Emboss or Drop Shadow effect). This will be the only solution if you want to apply Shadow effect to images.
  
  Don't check "Shadow" on!!!
• Don't change opacity of shapes or text boxes in the Inspector
  This compatibility problem is reported as one of the crucial problems iWebsites cause. iWeb users can easily change opacity of any shapes or images. For images, it doesn't make any problems. On the other hand, if you change opacity for shapes, it will bring out very weird looks only in IE (Internet Explorer). The shape will appear as much bigger than the actual size. In this reason, don't use opacity function in Graphic tab of Inspector.
  To avoid the problem in IE, we need to use an alternative way to get the same effect without resulting in any compatibility problems. Instead of changing opacity on inspector, open "Colors" window.
  
  Then, click the color of the shape in inspector. Then, drag right or left of opacity slider on "Colors" window NOT "Inspector". This alternative method will not make any problems even in IE, but this can be only used for changing opacity of shapes. For images, there is no compatibility problem even if changing opacity in "Inspector".
• Don't use "Vertically middle-align" of Text box
  If you type multiple line texts, don't set "Vertical-middle" of text box attribute. Actually, there is no way to make multiple texts align in the middle vertically by using CSS. "Vertical align" tag is only available for "Table" elements, because web browsers can't estimate how many lines are in the text box. On Safari & Firefox, it's definitely OK, however on IE, some texts which are aligned in the middle will be cut off or extremely look weird. Don't apply this setting to any textbox. Just use default setting. (vertical-top)
  
• Don't make "Margin" attribute less than 4px
  iWeb creates a text box naturally having 4px margin, but for some reasons, users can remove the margins or decrease it less than 4px. This is not an unclear issue, but we have found this setting may cause some text to look odd especially in IE. The best way is to leave it as default.
  
• Use "Web safe fonts" instead of your favorite fonts
  Do you know the fact that Macintosh fonts are slightly different from Windows fonts even though they are same font family? Because of this issue, your text box size or lines would appear differently on both systems. Don't use special fonts or your favorite fonts. Even though all Macintosh have almost same fonts collection, on windows platform, they will not clearly display. The most appropriate fonts would be "Arial", "Times New Roman", "Verdana", "Trebuchet MS"...

What should be fixed

• Instead of QuickTime videos / music, play video clips or music with cross-platform friendly players Don't drag any MP3 files or Quicktime movie files (MP4, MOV, M4V) into iWeb directly. IE, iOS, and Android may not play your media formats.
  It is highly recommended to follow these tutorials for solving cross-platforms issues:
  Music (mp3): HTML5 Music Player
  Movie (mp4): HTML5 Video Player
• Don't add "Stroke" to images. (This is one of the problems to make iWebsites load slow) Pro Pack will solve this issue: "Add border to images"
• Don't allow "scrolling" attribute in iFrame for Touch devices. If you embed iFrame (like Forms), make sure insert scrolling="no" tag within iframe tag. (e.g. <iframe width="xxx" height="xxx" allowTransparency="true" frameborder="0" scrolling="no" style="border:none;" src="xxx.html" ></iframe>)
• If you want to add some scripts code into HTML snippet, insert this tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> at the very top. Without this tag, some HTML snippets will not work in IE.

If you follow these instructions above, some critical issues related to compatibility on cross-platforms will be removed. This post will be updated when we find new compatibility issues.