STEP 3 - Images - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

The third step in this wizard has a little more for us to review. The screen looks like the one shown below:

 

window_mobile_site_wizard_step3

 

 

As mentioned in the introductory parts to this section, images can often cause layout issues as well as unnecessary bandwidth overhead and so it is very important that we handle them appropriately.

 

The options available to us to this end are described below:

 

Remove all images - Selecting this option will cause all images in your Web site to be physically removed (in your mobile Web site only - your main site remains unaffected). This is fine if your images are there for general design effect, but not so good if the images on your site are of informational use (diagrams, lists, etc).

 

 

Replace with links to images - (Active only if above option selected) - If you opt to remove all images form your mobile site (as described above) you then have the option to replace the images with a text link to the missing image. This link will be to the file-name of the missing image and, if the visitor clicks on that link, will display the original image in their browser. This 'one-step-removed' approach means that the images will not use unnecessary bandwidth unless the visitor expressly wishes to view the image. The visitor has the option.

 

 

Remove background images only - If selected, only those images in your site that are being used as 'backgrounds' to tables, pages and panels are removed. All images in the flow of content will remain unaffected. This not only reduces overhead but also can improve the clarity of the page content (with your text being displayed against a plain background, rather than an image).

 

 

Leave all images - Selecting this option will leave all images intact and unaffected. This option is fine if you have only a small number of images (or if you feel your images are already suitably optimized/sized for a mobile device).

 

 

Reduce Image Size - As well as physically removing some/all images, you have the option to reduce any images shown to an appropriate (maximum) size. The three sizes suggested as suitable 'limits' to your image sizes are:

 

176 x 208 pixels (e.g. the size of a Siemens c75 screen)

240 x 320 pixels (e.g. the size of a Nokia 6270 screen)

320 x 240 pixels (e.g. the size of a Blackberry 8800 screen)

 

If you select any of the above options any images larger than this size will be rescaled to fit the dimensions shown.

 

 

Compress Image Quality - As well as all the options above, there is one final option open to you, and that is to reduce the quality of the image. Just as most web graphics are 'optimized' for swift loading, you can strip more quality out of your graphics (often without being perceivable on casual inspection) to ensure that the impact on overall page size is minimized. This is generally regarded as good practice for mobile sites and a quality setting of 60-70% should leave your images looking great yet will reduced the file size significantly.

 

To adjust the quality of your graphics (again, on your mobile site only - your main site graphics will remain unaffected) simply slide the quality slider-bar left (for lower quality) or right (to maintain quality). The illustration below shows the slider set to 70% quality.

 

piece_mobile_site_wizard_step3_slider

 

With the desired settings made, click the 'Next' button to proceed to the fourth step in this wizard.

Home  Previous  Next