Graphic Design

iThemeKit Graphic Card 1

Graphic Cards

The item is an HTML5 figure element with an image and a figcaption.
The figcaption shows only the heading onload and slides up on hover.

Hero
iThemeKit Graphic Card 2

Overlay

The info icon indicates that visitor action is required.
The text content is centered and the internal or external link appears at the bottom.

Poster
iThemeKit Graphic Card 3

Action

On touch devices the hover state is activated by tapping the item and removed by tapping on the screen anywhere off the item.

Header

Grahic Cards

Better Design

The ThemeKit Graphic Design Cards shown above have a grid layout with two, three or four columns.
The images have alt text and a caption which shows at the bottom on page load. The info icon indicates that the visitor should interct with the item. It has controls for the icon color and its background color and opacity.
Overlay
The overlay is created using the <figcation> element which slides up on hover to reveal a text description with optional span and a link
The links can be configured globally to open internal or external pages.
Mobile Action
Om touch devices the overlay appears on tap and will disappear by tapping another item or anywhwere else on the device's screen using a "tap-to-go" plugin.

Graphic MP4 Video

Responsive Video

Self hosted MP4 video is a much better choice rather than hosted video like Vimeo or YouTube for fast download and better performance.
Video Files
A video player should show a poster image on page load, the video file should be lazy loaded and inserted in two sizes for computer and mobile devices.
Video Insert
A video file inserted via a widget on its own does not give a good visitor experience nor does it provide enough info for the search engines.
Insert video in a container along with its title and a descriptioon of the video content.

Vimeo/YouTube

Hosted Video

Vimeo and YouTube are not the best way to display responsive website video since they download a whole bunch of assets whether the visitor plays the video or not.
Lazy Loading
It is essential to lazy load the video and its assets or the page performance in mobile browsers will be noticeably slow.