Viewport Height Image Widget

These widgets have a full width background image with a transparent overlay. The background image has its height set to 100vh which means that it fills the browser or device window on page load.
Responsive
This page design is fully responsive down to the width on the smallest iPhone in portrait mode. If viewing this on a computer, reduce the browser width and height to see how the layout changes or use the browsers responsive mode.
Images
The widget loads three different size images for displaying on the different devices - computer, tablet and mobile phone.
Images should be cropped to the required size before importing into EverWeb. Suitable sizes would be about 1600px wide for the large image, 1200px wide for the medium image and 800px wide for the small image.
Overlay
The overlay has the option to animate in on page load and its backgound color has an opacity slider.
The content section is centered horizontally and vertically and has an h1 and h2 heading and a CTA style link tab.
Scroll Down
The scroll down function is optional. Clicking or tapping the chevron down icon smooths scrolls the page down to the next item. The smooth scroll script and the anchor are built into the widget.
The scroll down tab can be adjusted for icon color and the background color and its opacity. It can show a title on hover when viewed on computers if required.
Header OptionsThe header version has options for adding a logo and a scroll over function and incorporates the tab to open the mobile version of the navigation menu.
Logo
The logo is absolutely positioned at the top left and has controls for setting its width and position in relation to the top and left.
Navigation
The navigation is a separate item which is placed below the header on the EverWeb design canvas.
When viewed on computers, the navigation is absolutely positioned at the top and center of the header and the links display inline.
On touch devices like the iPad and iPhone, the navigation disappears to be replaced by a "hamburger" icon at the top right. Tapping this will open the mobile version of the navigation menu.
The navigation can be styled with a web safe font or a Google hosted or non web safe font with a web safe fallback. There are controls for setting the font size, color, hover color and the background color and its opacity. The inline navigation has the option for vertical separators and the mobile version can have horizontal separators. These inherit the font color.
The mobile navigation icon can be styled for icon color, background color and opacity and border radius. The drop down has a control to set its width.
Navigation Type
The navigation shown on this page is single level and can have up to fourteen links. The last two links can be configured to open external pages and in a new window if required.
There is a two level version of the navigation which can have up to six top level links and three directories. Each directory can have up to six links.
The mobile version of this navigation has accordion style drop downs for the links in the directories. Click the navigation link tab below to see an example of the two level navigation.
Responsive Design Testing
Responsive layouts need to be tested on the various devices before uploading to the server. There's little point in even considering a responsive design without the proper tools.
Download and install Apple's Xcode which is a free app for developers.
Once installed, create an alias to the iOS Simulator and use it to test designs on the various iPad and iPhone models.