EverWeb Widgets

Responsive Elements Widgets

Video Title

HTML5 Video

The widget uses the HTML5 video tag to play video files using the browser. This means that it doesn't have any heavy scripts to download like the EverWeb default video widget and makes it more suitable for video playback on mobile devices.
A video widget for a responsive websites MUST show a poster image on page load and prevent the video file from preloading. Otherwise, mobile device users will have to use up a chunk of their data allowance to download the file even if they choose not to watch it!
Video File & Poster Image
The video file should be made as small as possible and the maximum width setting used to restrict the player width to suit the file's width.
The poster image should be the same width as the video file and - obviously - must have the same aspect ratio.
Controls
The video has the new "playsinline" control. This prevents the video being shown fullscreen on iPhones and gives a much better user experience.
Autoplay & Muted
Autoplay should be avoided on pages which will be viewed on mobile devices. Safari for desktop now prevents video from auto playing. To allow a video to autoplay in Safari on computers, the soundtrack must be muted.
Video Tile
There is an option to add the video title and this should be used if possible. Otherwise, the search engines have no idea what the video is about and the only info they have comes from the video file name.

Theme Break

The theme break creates vertical spacing between items on a responsive page. It is dropped onto the page and the height adjusted to give the required spacing.
Line
The theme break widget can show a line which is vertically centered in the container. The line can be solid, dashed, dotted or double and there are controls for the line height, color and the theme break background color and its opacity.
The line not only has a control for maximum width but also one for percentage width. The latter control allows the line length to be adjusted.
Anchor
The theme break can also double as an anchor when used in conjunction with a suitable scrolling link tab widget. The anchor is added by checking a box and entering the anchorlink ID number.

Responsive Styled List

The list is created using the EverWeb widget API Assets List so it can have up to 100 items and these can be dragged around to reorder them if necessary.
In this application, the EverWeb Widget API Assets List is modified to create a list of links rather than a bunch of images. For those who are not yet familiar with this, here's how it's done …

  (a) Click the "Add" button and an entry will apear with "Double click to edit"
  (b) Select this text and then add the data in the boxes provided
  (c) Once the data has been entered, single click the item in the list and it will become editable
  (d) Enter a suitable name for the link
  (e) Repeat as necessary

The main heading and this text are optional.

  • List items are added by clicking the "Add" button, selecting the item in the Assets List and then entering the text into the box below it
  • Items can then be numbered in the Assets list for easy reference by double clicking them
  • List items can run to two or more lines. Use the HTML line break <br> to create returns
  • There is a line height control as well as a control for vertical spacing of the list items
  • The available list style types are …
    disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha
  • The list item marker can be placed outside or inside the list
  • There is a control for adjusting the list item inset from the left edge
  • The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback
  • Text links can be created and their styles for color, hover color and text decoration set in the widget inspector
    See the INFO section for more about creating text links in widgets
  • The container can be styled for top/bottom and left/right padding
  • The widget has controls for changing the background color and its opacity

© EverWeb Widgets -