EverWeb Codebox

Mobile Website Images

Preparing Image Files

Images on smart phone websites should be kept to a minimum. Since the website is only 320px wide the images should be reduced to at least this width before importing them. As usual, make sure the file names have no spaces or special charaters in them.

In this context, "images" means actual photos. There should be no other images used for buttons, background shapes etc. Using rollover images for buttons should be avoid.

Inserting Images

Images can be inserted using HTML so that they can include SEO info in the alt and title attributes. A typical code to be pasted into an HTML Snippet is shown below...

<img src="{!-ASSETSPATH-!}Images/image-name.jpg" alt="Alt Text" title="Tooltip Text Goes Here" style="width:320px;height:240px;border:none;margin:0;padding:0" />

Drag the image into the EverWeb Assets column and control (right) click it to copy the relative file path. Paste this into the code where marked in red.

Enter some appropriate Alt Text and Title Text along with the image width and height.

<a href="#"><img src="{!-ASSETSPATH-!}Images/image-name.jpg" alt="Alt Text" title="Tooltip Text Goes Here" style="width:320px;height:240px;border:none;margin:0;padding:0" /></a>

Image Links

Images can also do double duty as hyperlinks since they provide a large target for finger tapping. Use the code below to turn an image into a hyperlink by wrapping the <img> tage in <a></a> tags and replace the hash sign (#) with the URL to the page or file...

Widgets

The widget shown on THIS page makes it easy to insert them with or without captions and to add SEO info.

The Mobile Lightbox image widget can be used to save space when more than a few images are required per page to complement text descriptions.

Retina Image

Since a fair number of visitors may be using iPhones it may be worth adding Retina images to provide an increase in quality. This is dealt with HERE by including the retina.js script.

Two Panes
EverWeb Codebox Mobile Website Demo