EverWeb Widgets

Viewport Height Image

It should be obvious that an item like a full size background image cannot be inserted into a responsive page design. The image would be far too large to download to a mobile phone over a wireless cellular network.
Viewport Height
An item can be made to fill the browser or device window by giving it 100% width and setting its height to 100vh.
Viewport Height (vh) — This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
If the item is fixed in position, the content below it will scroll over it and the effect will be the same as a background item without the huge penalty of downloading images in excess of 1Mb.
Images
The image is inserted in three different sizes - one for computers, one for narrow browser widths and tablets in landscape mode and one for tablets in portrait mode which will give retina @2x quality when viewed on phones in portrait mode.
The large image used in this demo is 1600px wide with a file size of 360Kb.
The medium image is 1200px wide and weigh in at under 200Kb.
The smaller image is 800px wide with a file size of only 40Kb.
These images are inserted using the HTML5 <picture> element which means that they can also have alt text for the search engines.
Overlay
The full size overlay can animate in on page load and has controls for the animation time and delay which are set in seconds.
The overlay can show a centered heading and paragraph with an option for a CTA style link. The items can be spaced out vertically and the link can be configured to open internal or external pages and in a new window if required.
This group has a maximum width setting and can also show a background with controls for the color and its opacity. When this background is set, the overlay opacity can be reduced to zero if required.
NOTE:
At the time of writing, EverWeb cannot display items which are 100vh on the design canvas. The item will be displayed at 600px in height but will obviously fill the viewport when previewed in the browser.
When creating responsive pages, it is really important to test the layout in the browser and in an iPad and iPhone in the iOS Simulator.

iOS Simulator

Navigation & Heading

The navigation overlays the image at the top. This is created using the RGL Overlay Navigation widget. This can be inserted below a media item on the EverWeb design canvas but can appear at the top by simply checking a box.
The icon for opening the mobile version of the navigation is located at the top right and can be fixed in position so that it is always in view if required.
The navigation can display the current page in a contrasting color and has an option to add an. animated underline
Heading
The heading is created using the RGL Row Heading widget. This is placed below the hero image on the EverWeb design canvas and can be made to appear to overlay the top or bottom when viewed in the browser.
The heading has a full width background which, in this case, has its opacity set to zero, and another background which is limited by the maximum width setting. This is set with an opacity of around 50% so that the text is easily visible.
There is a drop down for selecting the heading type with the choice of h1 through h4. The main heading with the website name is set to h1, the page name to h2 and section headings to h3.
Most of the widgets created by EverWeb Widgets use HTML5 containers - <figure>, <article>, <aside> and <section>. When using HTML5, the first heading in any container element is an h1.
The widget has controls for styling the heading and setting the letter spacing and a text shadow.