Media

Responsive Slideshow

Responsive Slides

1 A slideshow for a responsive website needs to be lazy loading and to insert each of the images in at least two sizes for computer and mobile devices.
If the images are landscape then a third image should be inserted for mobile phones in portrait mode with a square or portrait aspect ratio.

Images
The slideshow in the demo has a maximum width of 960px. The images were resized and optimised before importing into EverWeb.
The images are 960 x 640px, 720 x 480px and 375 x 540px respectively.

Captions
The captions can run to two or more lines and their position on the Y-axis adjusted. The font size can be reduced for phones.

Controls
When viewed on a computer the previous/next action tabs should be positioned together at the bottom right.
When viewed on a tablet in landscape mode the best position is half way down on each side so that the slider can be thumb driven.
There is a breakpoint control to set the breakpoint below which the action tabs are hidden since the slides can be swiped.

Image Links
Just like image, slides need to show an icon if they are configured as links to give a visual indication to mobile touch device users.

Responsive Slider [2]

A slideshow displaying products should have a text description and info/buy link in the same container for best search engine indexing results.

Info
ThemeKit Unit Slide 1
Responsive Slider [2]
ThemeKit Unit Slide 2
Captions On Hover
ThemeKit Unit Slide 3
Lazy Loading
ThemeKit Unit Slide 4
Autoplay Option

Responsive Slides

2 Using a two column grid to display a slide show and a description above the breakpoint means that only one image file per slide is required.

Images
The images in the demo slider were sized to 400 x 300px and optimised before importing into EverWeb.

Autoplay
Autoplay is not a good idea anyway but it certainly shouldn't be used when the slider is viewed on a battery driven mobile device.
This slider has an option to autoplay on computers or large tablets and turned off for smaller mobile devices.

Responsive Video

ThemeKit Unit Video Box

Video Box

A video player for a responsive website must be able to insert an HD file for computers and an SD file for mobile devices and prevent the video file from being downloaded until the visitor decides to play it.
The video files used in the demo are …
1550 × 780 @ 3MB
775 x 390 @ 880KB

More …

YouTube

ThemeKit Unit YouTube

YouTube

Hosted video like YouTube & Vimeo are not the best choice for a responsive site that will be viewed on smart phones.
To make it better the video should be lazy loaded in a lightbox box window.

INFO

Video Essentials

Apart from sliders and galleries with too many oversize and unoptimised images the biggest cause of slow page download is video.

  • 1Use self hosted MP4 video in preference to Vimeo or YouTube
  • 2The player must display a poster image on page load
  • 3Use an MP4 video player which loads a smaller file for mobile devices
  • 4Video files should be prevented from downloading at page load
  • 5Vimeo and YouTube have poor download efficiency
  • 6If Vimeo or YouTube is a must - use lazy loading
  • 7If two or more videos are inserted provide an auto pause function
  • 8Poster images must have the same aspect ratio as the video file
  • 9Keep poster images as small as possible and optimise them
  • 10In general the video file's width should be about half that of the containers max width.

Hosted Video

Hosted video such as Vimeo and YouTube dowload a whole bunch of assets at page load even if the video isn't played.
If the video is hosted on Vimeo or YouTube, download the file in two sizes as MP4 to self host them and provide a link to the online version.
The player assets and the video file create a whole bunch of remote server requests that effect download performance.
Follow the link below for more about page download speed …