Tips and Tricks for iWebsites

What is the most appropriate page size?

Actually there is no best answer for this question but we would like to let you know the most common website width. (The height is meaningless because a webpage's height is decided by contents length.) Due to the appearance of many mobile devices such as iPad, iPhone, and Android platforms, the width of the web page is much important than before.
We think that "1024px" would make the best look for all kinds of platforms. More important thing is to make sure that both side of your web pages have at least 20px empty paddings. This is really important for users to browse your website on mobile devices! If you don't add padding into both sides, your site would look odd on mobile devices. Since iWeb just allows users to add padding to top & bottom, you should do it for left & right manually. Increase your site' width up to 1024px, and let each side have 22px paddings. (Align your contents at center. Your actual page size will be 980px.) This is a basic layout which Apple.com did.

How can make your site load faster?

If you are good at HTML coding, you may already know this fact that a HTML code which is generated by iWeb is quite long when comparing to other general websites, and their iWebsites loading speed is quite slow. These problems are 100% TRUE. Especially those who apply any templates except for the white-blank template, would feel their site are extremely slow.
Do NOT use ANY TEMPLATES if you want to build professional websites.
The reason why I recommend NOT TO use any templates, is that each template page has already heavy graphics for the backgrounds and default layouts. (generally they have 500KB graphic files and pretty many small images.) It will cause to reduce your site performance, and in the traffic time your site may be down. In addition, the worst thing is that you can NOT increase your site's width over 700px (you can do but it will look weird) because the background is fixed as 700px width. To improve your site performance better, following these steps below:

Use "White-Blank" template for every page.
Do NOT add borders (strokes) to images. You MUST use the alternative way we made: Add Border to Images.
Make sure the number of resources (in the "yourpage_files" directory) are less than 30. Big resource files and the number of resources both will reduce your site performance. (increase network bandwidth)
Before inserting images to a page, please optimize your photo by using iPhoto or Photoshop. You can refer to this tutorial: Export Photo for Web

Once you apply these rules for your site, try to visit your site after emptying your browser's caches. You will feel your site is much lighter and faster than before. (We suggest to test "Internet Explorer" browser. From this browser, you will be able to feel much improved.)

Don't use stroke in order to add borders to images.

As you know, iWeb does provide an easy function to add borders (strokes) to images. However nobody knows this behind secret of that function. That's very harmful to your site performance. If you add a stroke into an image, 4 additional image files will be automatically generated.
A convenient way is not always guaranteeing quality. If you are using this feature of iWeb, please remove all strokes right now. If you apply to 5 images, 20 extra "stroke_x.png" files will be generated, as a result your site may be very slow until the end of loading.
In order to prevent this critical issue, you MUST apply a different way. This alternative way may cause to spend your time a little bit more but it's highly recommended. We developed an alternative trick to add borders or frames to any images by following a standard CSS & HTML. This trick is included in Pro Pack. You can take a look at it from this page: Add Border to Images.

What is the "Root" folder? Where is it?

"Root" folder is the highest (top-most) folder in the hierarchy. Root is the most important because this contains all files that your website need. To make use of many widgets and plugins through HTML snippet, you MUST know where Root is.
For those who buy hosting services:
In most cases the "Root" path will be "www" or "public_html" or "htdocs" and the absolute root path is "/". For instance, there is a folder called "js" on the root. The path of "js" will be "/js". If you don't want to input the full path including "http://...", the path should start with "/".

How to include Spreadsheets in web pages?

An web page can NOT display Microsoft excel or numbers (iWork, Macintosh office) spreadsheets without other add-ons like active X. iWeb also can not show spreadsheets as default. It is just available to attach documents to enable people to download but we can naturally show spreadsheets using this trick below:
If you already have a spreadsheet which you want to display on your site, go to Google Drive. Then import your spreadsheets (excel, csv...) to Google Drive. It will automatically turn your sheets into Google drive format. If you don't have a spreadsheet yet, you are free to create any sheets from there. It is really simple, and likely to a compact version of Microsoft excel. Then you can grab your HTML code (iframe) if you embed the sheet into your web page. Just copy and paste the code into the HTML snippet. For more details, you can refer to this tutorial: Google Docs.
If you have a CSV file (you can export excel or numbers documents to CSV format.), you can convert it to standard HTML table format. This converter is only included in Pro Pack. You can see it on this page: Smart Table

Don't allow scrolling in iFrame for Touch devices!

iFrame is an element of HTML components which is used to embed different HTML pages into a page. However, in some cases the embedded pages can be longer than the assigned iFrame size. This case will result in that the iframe is oversized especially on mobile devices such as iPad, iPhone, and Android. It will corrupt your entire page design because iframe may hide other HTML elements. Here is a tip for avoiding the problem.
The reason why iframe turns into oversized is that touch devices do NOT display a scroll bar in iFrame. Therefore, it automatically blocks scrolling. To avoid it, you can just add scrolling="no" tag within <iframe> tag. This tag will prevent the iFrame to be scrolled. However this will block scrolling in iframe on every browser not only mobile platforms. Therefore the best way to use iFrame is that the embedded HTML page size should be same with iFrame size. Don't forget many people using mobile devices are visiting your website.

To reduce image filesize, use Image Fill as tile on rectangle.

iWeb has a quite weird internal function to handle images. As one of the weird functions, if you add any shapes except for rectangle and then fill the shape with image tiles, the entire shape will turn into a big image. Even though there is HTML style tag, background: url(image url) repeat; regarding background image, iWeb does NOT generate that HTML code. To let iWeb generate this code will help to reduce network bandwidth.
To let iWeb create the HTML code, you MUST fill image tiles on a Text Box or rectangle shape. Insert rectangle or text box to a page, and then select it. Open Inspector, and then choose "Graphic" tab on the inspector. Choose "Image Fill: Tile", and make sure that there is no border around the image-tiled shape. With this method, iWeb will not generate a new image file, instead standard HTML code "background: url(image url) repeat;" will be generated. This will help load your page much faster because only a small tile image will be loaded.

4 extra images will be generated if you add a border to an image!

This is also one of the iWeb's weird functions to handle images. If you add a border around images, shapes, or text boxes, iWeb will create 4 small image files instead of adding HTML style tag style="border: 1px color;". Due to this problem, if you add borders to multiple images, lots of "strokeXX.png.." files will be generated, as a result, loading speed of the page will slow down. To avoid this problem, follow below:
If you add a border to one or two images, it will not be a serious problem. But, if you add borders to 5 images, 20 strokexx.png files will be generated, which may cause your network bandwidth increased. Big image files can be one of the factors to make network slow down, but more serious is the number of files. Hence, if you want to make a border to image, use HTML snippet instead of directly inserting images on iWeb.
This one-stop solution is included in Pro Pack.this page.

Don't insert highly-compressed jpeg images to iWeb!

This is a bug or crucial problem of iWeb when handling images. Once a low or medium quality of JPEG image file is inserted to a page on iWeb, after published, the image size will be turned bigger than original. For other compressed images such as png, gif, and tiff, iWeb will reduce the image size smaller than original but for the highly-compressed JPEG file, it is an exceptional case. How to avoid this problem:
Don't insert directly the low or medium quality of JPEG files into a page on iWeb. Instead use HTML snippet or Replace HTML. Insert a text box and resize it equal to the image size you want to add, then replace the text box into <img src="image URL" style="border:none;" />. (or you can directly write this code into a HTML snippet.) You can refer to this tutorial: Replace HTML. If you feel difficult, just paste the HTML code into HTML snippet, then place it to where you want. If you have photoshop, don't compress JPEG files less than high quality. Higher quality than medium will not make any problem by iWeb.

Don't change opacity of shapes or text boxes in the Inspector!

This compatibility problem is reported as one of the crucial issues of iWeb. 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 result in very weird looks only in IE (Internet Explorer). The shape will appear as much bigger than the actual size. In this reason, MUST NOT 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, and 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".

Remove Main Text box which will be moved to a weird position on IE!

If you insert a page which is not a blank, there are several text boxes template pages include. You will see tooltips to let you know what purposes each text box have once you mouse over them, such as Title, Heading, and Main text. Main text box ("Type main text for your page here" tooltip) may cause a wrong positioning problem on specific web browsers, especially IE 6.
Especially, I found the bug in the specific situation that an image is placed right behind the main text box. This will replace the main text box to somewhere not the fixed position on IE 6. Actually, Main Text box is never different from normal text boxes. It is just created by specific iWeb templates. Just remove it, then type texts on the empty text box which can be added manually.

How to insert Table into a page on iWeb?

Table is a standard HTML component like text box. However iWeb does NOT allow to insert a HTML table element. You can insert a table by inserting HTML code into a HTML snippet but it is a quite time-consuming job. You can easily a same-looking table not real HTML table by using another Mac application.
To insert a Table into iWeb you should install any versions of iWork. iWork is well-compatible with iLife. Especially, you are free to copy & paste any shapes, texts, and even tables from Keynote into iWeb. For others you can do on iWeb itself but the different thing is that Keynote has Table. Open Keynote, then create a Table. Customize the table as you want. You must modify everything on Keynote. You CAN NOT change anything in the table on iWeb. Just copy the table on Keynote, and then paste it into iWeb. This table will be turned into an image (.png) after you publish your site.
read this tutorial: Table | Smart Table

An image is gone away when you adjust a masked-image!

iWeb still has a bug that an image is disable once you adjust the image which is directly masked. In other words, you can create a shape, then drag an image into the shape in order to mask the image with the shape. This is very useful way to transform an image into a specific shape like circle, rectangle, star, and etc. However you will no longer adjust the image because the image will disappear after several adjustments. But you can avoid this bug.
Don't directly drag an image into a shape. This way will cause the image look "x" (it will be disabled). This is an annoying bug but Apple has not fixed it. If you want to insert an image to a page, you should drag an image to empty spaces not any shapes. Then, if you want to mask it with a specific shape, select the image then do "mask with Shape". This way will NOT bring out any bugs, and you can use adjust image panel for the masked-images. If your image is turned into 'x', you should delete the image on iWeb, then retry to use this method.

How can open a link of RSS Feed widget on the same window?

RSS Feed Widget, one of internal iWeb widgets, works great but you may find a problem already. The problem is that each link on the widget only opens the target urls from the new window not the same window. If you linked it to some external blogs, it may not be a problem but it will be an issue if you linked it to your blogs in your same site. Here, a simple trick to let you edit RSS Feed widget source code directly.
Go to your site directory, then you can find RSSFeed.js script file, "Your site > Scripts > Widget". Open RSSFeed.js file by using TextWrangler or TextEdit. Press Command + f button to search specific words. If the find window shows up, type the word '_blank' on the find field, and replace it to '_top'. After you have done, save it. The widget will open each link on the same window. Once you have published the entire site, you should do this process again because iWeb will overwrite it every time.

Why does your site have no visitors or a little traffic?

iWeb is NOT friendly with search engines. Even if your site looks very beautiful and useful, it would be meaningless if there is no visitors or few. If you want to get more traffics, and spread out to your target markets, you should go through SEO processes and other essential tasks, eventually your site will be ranked up and getting popular. Outside iWeb several essential processes with Google should be done.
First, you need to follow this tutorial: How to add your website to Google. Almost all business sites or even personal sites have done this process. It will let people find your site via search engines. This is the first step to get traffics more. Secondly, you would need to read How to integrate Google Custom Search to enable visitors to easily search a specific content they want. This also helps your site rank up on search engines. Last but not least, install Google Analytics to track visitors activities as well as analyzing traffics through How to utilize Google Analytics.

How to manipulate HTML code without HTML snippet.

As you know, iWeb does NOT allow users to modify HTML code on itself because iWeb stores just binary resources in itself, and then it generates HTMLs once a website is published. That's why it is impossible to modify HTML code in iWeb. However, here is a trick to allow you to edit HTML codes by another application.
To edit HTML code, you must publish your site to Local folder. Then, you should install a free software called MassReplaceIt from this website: http://www.hexmonkeysoftware.com/. This application will help you edit HTML code. In order to use this for editing HTML, you should read Replace HTML tutorial first. Once you have finished the settings, all HTML codes will be inserted or modified by just one click.
We would recommend to edit it from a text editor if you feel difficult to use "Replace HTML" method.

How to convert a image to Black and White image.

One of the most useful features of iWeb would be integrated with great image controller called Adjust Image. It is really easy to handle and just dragging sliders of various properties makes a image look different. I recommend to use this image controller of iWeb instead of other external editor to save time and efforts. By this internal image editor, you can apply diverse effects to an image. Choose an image you want to apply Black and white effect to. Click Adjust button on the bottom menu to open image editor on iWeb. On the Adjust Image viewer, take a look at Saturation. Drag Saturation slider to zero (to left). It gets rid of colors, hence it will include black and white only. Like this trick you can manipulate an image to various styles you want. If you want to know this more in detail, go to Black - white image tutorials, then follow the process.

How to insert a special font not web safe fonts like Arial.

Basically, it is recommended to use standard web safe fonts such as Arial, Lucida Grande, Verdana, and other limited common fonts. This is because there are very various client environments. (HTML is interpreted by a web browser Not web server, that's why a specific font should be installed in local to show it correctly.) However, sometimes you may need to use special fonts having graphical styles. iWeb can do it. You should convert a text to an image. This is called "Imaging text" function. Select a text box which has special fonts. Then check on Shadow and make sure Offset is '0 pt', Blur is '0 pt', Opacity is '100%', and Angle is '0˚. The option values setting is used for None-shadow, just like flat-text. The text is turned into an image. It is no longer text. The text will appear constantly across the different web-browsers and platforms. If you want to know this more in detail, go to Text-image tutorials, then follow the process.
Finally, we have developed "Web Font" wizard! Don't use text image trick anymore. To let google place your contents on the search result more, please apply Web Font to all pages of your website if you prefer a stylish font.

A big problem of Shadow effects on 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. 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.

How can increase a page height more than 4000px?

iWeb restricts the height of a page up to 4000px. (I don't know this reason why Apple Inc. created like that.) Hence, you can NOT build very long pages as default. Very long contents may not be good, sometimes it's unavoidable (I prefer single long page than multiple pages). As you may know from this site, some of pages are longer than 4000px. You can make it, either. Insert a blank Text Box to a page, then drag it to right above the footer. (You must use footer to execute this trick. You may need to read this tutorial: footer.) Once you drag the text box down and down, you will be noticed that the page's height is automatically being increased over 4000px. Now, you are allowed to go across the "4000px" border.