EverWeb Widgetbox

Website Slideshows

Preparing The Images

Although it's possible to drag any old bunch of images into EverWeb and throw a sideshow together in a few minutes, this is a real rookie way of going about it and will result in unsatisffactory performance at the very least.

The three basic steps that need to be carried out before the images are loaded into a web design app are...

[1] Crop the images to the same aspect ratio

[2] Resize them for optimum performance

[3] Create logical and correct file names for each image.

Nothing looks more amateurish than a slider or gallery with a jumble of irregularly sized images. Images can be cropped in iPhoto or Preview. An excellent app for this job is EasyCrop.

There's no point in importing a 2000px wide image into a website whose page width is 980px. Resize the images to the maximum size of the slider. ImageWell is cheap and will batch resize as well as preform numerous other useful functions such as file conversion and adding captions and © notice.

Like any other file that is used on a web page, images need to have file names with no spaces and definitely no special characters. That includes the apostrophe! The images for a slideshow should be numbered in the sequence they will appear in the slideshow along with an identifier such as gallery-A-1.jpg, gallery-A-2.jpg, gallery-A-3.jpg etc.

See the NEXT page for info about adding images to the widget - fast!

Choosing a Slider

Slideshows come in a huge variety of styles and degrees of sophistication and the type chosen for any given situation will depend on a number of factors. For example, there's not a lot of point in using the EverWeb default slider if all you need is an automated banner or a simple manual slider. This would be overkill - like using a 14 pound hammer to insert a thumb tack - and really doesn't contribute to creating an efficient, fast downloading web page.

Auto sliders are used on websites in an attempt to add eye catching dynamics. In the main, they are irritating and cause visitors to scroll them out of sight or worse, to leave the page. They should not be used on mobile websites. Remember that a lot of visitors are going to view a conventional website on larger tablets like the iPad and auto sliders just serve to flatten the battery. If an auto slider is going to be used it should be extremely lightweight with carefully optimized images like the example on THIS page.

Pause On Mouseover

Auto sliders are more useful if the visitor is able to pause it on hover so that they can look more closely at any image and read a text description of the image. The slider shown on THIS page does just that by pausing on mouseover and can have captions as well. If the images need to be hyperlinks, use this Auto Slider with pause on hover alt text for SEO and captions.

Mobile Slideshows

In consideration of visitors who view the page on a device like an iPad which doesn't support hover/mouseover, a better option is to use a manual slider which can be finger swiped. The example on THIS page can also be navigated using the pager dots or swiped on mobile devices.

Big Can Be Better!

A full size responsive background slider can be quite impressive and a more sphisticated one with controls and captions is even better.

When space is tight, the Lightbox Gallery can launch a whole slideshow from a single thumbnail and any amount of them can be placed on a page in you need to show off loads of images.

Manual Slideshow

This Manual Slideshow can have captions, alt text and hyperlinks and a swiper with pager dots, captions, alt text and hyperlinks can be seen HERE.

Image Navigation

The Accordion Slider can be used as a slideshow or navigation menu. The header text can be customized and each image can have a caption and a hyperlink.