EverWeb Codebox

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.

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 first 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 it also helps if there is some visual indication of where they are in the slide sequence. The second widget shown on THIS page does just that by pausing on mouseover and making use of pagination dots.

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 third example on THIS page can also be swiped on computers by holding down the mouse and flicking sideways - left or right. Navigation can also be achieved by using the pagination dots.

Image Gallery

Galleries that use a grid are useful for showing off a large number of images in a small space but can look rather messy and take a long time to load if the slides are not of a similar aspect ratio and optimized for size. Those that launch an auto slideshow when any thumbnail is clicked are kind of pointless and a better option is a carousel which can be created by using the EverWeb default slider.

The gallery widgets shown on THIS page are capable of accommodating a large number of images in a compact space. Each "page" holds nine thumbnails and the thumbs can be navigated using the back/forward arrows. Any image is launched from its corresponding thumbnail by clicking and a another buttun switches between thumbnail and image view.

Each widget can be switched between small, medium and large depending on the imported image size. This means that the page download speed can be optimized by not using images that are larger than necessary.

Each widget is designed to accept images of different aspect ratios - landscape, portrait and square. The square one can be used for a mix of images with different aspect ratios.

Swiper

The SWIPER does what its name implies and is ideal for websites aimed at smart phone users. The pagination dots give a clue as to the image position in the slider sequence and can also be used for navigation.