ThemeKit Responsive Design

Galleries & Slideshows

Responsive Slideshow

If a slideshow is content width it must load a smaller image file for mobile devices and lazy load the images.
The images in the demo were sized to 960 x 600px (40KB) and 720 x 480px (30KB) and optimised before importing into EverWeb.
The slider above has the previous/next controls grouped together for the convenience of computer users. The controls can be hidden on mobile devices for swiping. If present they move to the center at the left and right to make them easily thumb driven.
The link option shows an icon at the top right. Captions and icons can appear on hover on computers.

Page Speed

Image Gallery

Buzz Gallery
Caption StylesCaption PositionSlide CounterShow/hide ArrowsOverlay Opacity

Buzz Gallery

The image is the action tab to open a lightbox gallery to display images with different aspect ratios.
Customised slide captions can be displayed at the top, bottom or outside the image.

Video

Image Gallery

It makes no sense to have an image gallery with a thumbnail grid to open the large images on a responsive page.
Think of all the extra images required and the amount of scrolling required by phone users.
The gallery above needs just a single lazy loaded image to launch the slideshow and provides a text block for the gallery name and also a description for the visitors and the search engines - win, win!
Badly conceived image galleries and slideshows are the main cause of poor or unacceptable Google PageSpeed Insights score …

Google Insights

Product Slider

ThemeKit Buzz Slider 2 1

Buzz Slider [2]

Optional Span

Content slider with adjustable relative column widths.
Adjustable transition time with slide or fade transition.

Info
ThemeKit Buzz Slider 2 2

Content

Optional Span

The optional links can be configured to open internal/external pages.

Content
ThemeKit Buzz Slider 2 3

Images

Images are lazy loaded and only require one image per slide.

Images
ThemeKit Buzz Slider 2 4

Controls

Arrows

The directional arrows can be removed for swiping on mobile touch devices.

Video

Content Slider

Most responsive slideshows aren't much good for displaying procucts or items that require a description.
The ThemeKit Buzz Slider [2] uses an adjustable two column grid layout with the image in one column and an article in the other.
The article has a heading, optional styled span for price etc, text and an optional link.
Images
Since the images are not content width there is no need for a mobile version of the image. The images in the demo were cropped to 600 x 600ox and optimised before importing into EverWeb.
Content
Below the breakpoint the content is below the image so it has to have a minimum height setting to compensate for varying amount of content.