EverWeb ThemeKit

Hero image with up to three animated layers, a parallax scrolling option, a heading, text and one or two internal links.

Media Anchors

Hero

The ThemeKit RWD-X Hero inserts two images for computer and mobile in an HTML5 <picture> element to allow an alt text attribute for keywords fir the search engines.
Text
The centered article has a heading, text and one or two optional internal links. The container can have a border and/or a bottom box shadow with the option to remove the bottom border when the shadow is present for a more professional appearance.
Animation
The image can animate out from the center to give a more unusual effect. The overlay has controls for background color and its opacity and can animate in and down from the top.
The article can animate with a fade or scale animation.
Parallax
Parallax scrolling can be added using a slider control. When it is at zero there is no effect and at maximum the image is fixed for scroller over. In the demo the slider is set to 50%.

Drop Box

Responsive D-Box

Drop Box Content

The optional image has controls for max width and padding and can be inserted in two sizes if the content width is wider than 800px. The images have a lazy loading function which should be turned on since the images are nor seen on page load.

The optional list can have any amount of items
The list items inherit the text font, font size, line height and color
There is a control to adjust the list item inset
List item spacing can be adjusted
Choice of eight list style types

This optional paragraph is followed by an optional CTA (call to action) style link which has a background hover animation and can open internal or external paes.

Media

Hidden Content

Too much visible content on page load makes items hard to find and requires too much scrolling for visitors using small mobile devices.
An accordion style dropbox is a neat way to hide content on page load yet make it easily visible.

Responsive Drop Box [2]

Left Column

The ThemeKit RWD-X D2-Box widget has a two column grid in the content area. Each column has an option for an image with alt text, a heading, styled spans and an optional internal/external link.
Links
The links have a hover background animation and are located at the bottom of the columns so that they line up horizontally despite varying amounts of content.

Home

Right Column

This column adds the option to add a list. On browser/device screen widths below the breakpoint the layout is switched to one column and this one will appear below the left column.

Responsive images should be properly size
Optimise images before import
Lazy load images if not in view at page load

Media

Responsive Navigation

Navigation

Traditional horizontal navigation is not recommended for responsive pages. Navigation should appear front and center on click or tap for maximum user convenience and click through to other pages.
The ThemeKit RWD-X Nav widget is in the form of a toolbar which is fixed at the top on computers and laptops and has a show/hide function. It switches to the bottom on mobile touch devices. The mobile navigation tab should be in the bottom 50% of the screen - definitely not the top!
Show/Hide
So that it doesn't take up space in the way that a fixed position item would the navigation toolbar has a show/hide function both in the top and bottom positions.
Options
The navigation toolbar has options for an internal link and a spam protected email function. The link has an info icon by default but this can be changed to any of the 100s of SVGs in the download folder.
Below the break point the internal link is replaced by a smooth scroll to the top function.
The links have a background hover animation on computers and the current page link can be indicated with a different background color.

Responsive Modals

One of the main considerations with responsive pages is to keep the onload page content to a minimum for the benefit of mobile device users. One way of doing this is to use the "catch all" ThemeKit RWD-X Panel widget shown on the previous page.
Modals
A modal (modal window or lightbox) is an element that opens above the viewable content of the web page and obscures it to allow the visitor to focus on its content.
These modal widgets were designed from the ground up to provide the best efficiency and professional class design features.

Open Modal

ThemeKit Responsive Modal

The modal has an optional image with alt text, a heading, text, styled spans and an optional internal link.
Modal Styles
The modal has a maximum width setting and controls for adding a borer and/or a bottom box shadow.

Video Modals

Content Modal

The content modal has an optional image with alt text, a headimg text and an optional internal/external link. The modal is closed by clicking the overlay or the optional close tab
Action Tab
The action tab is centered in a bar and has text and an optional SVG icon. The default icon can be changed by checking a box and entering the code for one of 100s available in the download folder.
Scroll Anchors
The modal action tabs can be configured as an anchor if required and will smoothe scroll from a link on the same or another page.
Check out the scroll navigation on the home page to see how it opens this page and smooth scrolls down to the appropriate action tab.

Anchor Nav

Interactive Map

Map

A google map is not something you want to show on page load on a responsive site. It not only reqquires a whole bumch of assets to be dowmloaded but they are also requests from a different server which can play havoc with the page download time.
Showing the map in a modal on click and lazy loading it is a much better way.
Aspect Ratio
By default the widget displays the map at a 4:3 aspect ratio and changes it to a 4:5 ratio for mobile phones. These ratios can be adjusted as required.
The map has a max width setting and has controls for adding a border, bottom box shadow and for adjusting the overlay opacity.
Like the other responsive modals the map can be hidden by clicking the overlay or by using the optional close tab.

Modal iFrame

iFrame

iFrames can be usefull for displaying content from another section of a website or from another website.
The responsive iFrame has a maximum width setting and a maximum height set to 90vh (viewport height units). when the content excedes the height of the available space any overflow will scroll.
NOTE that an iframe will NOT display a multipage PDF file unless the file is uploaded to Google Drive and referenced from there.

Slide Out

Reducing Content

On of the problems with a responsive website is that a reasonable amount of page content when viewed on a computer can be way too much and incur to much scrolling for a mobile phone user.
Using the modals shown on this page can add a lot of off screen content which is lazy loaded to improve page load time.
A dropbox cna be used to add extra content on click or tap like the ThemeKit Responsive T-Box widget.
Another option is a slide panel which only requires a small action tab to be seen on page load.

T-Box

Slide In Panel

The ThemeKit RWD-X Panel widget can slide in from the left, top, right or bottom by engaging with the animated action tab,
Action Tab
The tab changes from an info icon to a close icon on click. It can be placed amd centered at the left, bottom or right of the browser window/device screen.
Panel
The panel has options to add a lazy loading image with alt text, a heading, text, optional list, more text and a CTA (call to action) style internal/external link.
The panel content is viewable on the EverWeb design canvas and then hidden prior to publishing. Like all the ThemeKit fixed position widgets it can be inserted out of the way below the footer widget in EverWeb.