ThemeKit Interactive Hero
The under layer images can be lazy loaded since they are not seen on page load.
ThemeKit Interactive
Responsive Design
Website design has changed a lot over the years due to the fact that most visitors are using mobile touch devices.
Most of the available EverWeb default features and widgets are really not efficient enough or suitable for use in responsive page designs.
Interaction
Most visitors will enjoy a website visit more if they can interact with the content. This is why autoplay should never be used and animations should be used only where necessary to discretely draw attention to an important item.
Click the "Show Info" tab to find out why more up to date techniques are required to increase the visitor's experience and why outdated items like navigation need a rethink and footers should be removed when the page is displayed on mobile phones.
Responsive Info
Make sure that all media files are appropriately sized and and optimised.
Lazy load images that are not seen on page load and lazy load iframe content such as YouTube video and Google maps.
Avoid using a footer unless you can hide it on mobile devices using a widget like the show/hide slide up footer on this page.
Footers should be replaced by a toolbar with contact info such as spam protected email and a phone function.
Navigation should be vertical and the action tab should show the state with a open and close icon.
The navigation action tab should be in the bottom half of the viewport when viewed on mobile touch devices.
Interactive Content
Interactive Content Panel
The content area can have either one or two images followed by a heading, text with styled spans for sub headings and an optional internal/external link.
Panel State
The content can be closed or open on page load and, in this case, always open with the action icon hidden.
Images
The images are in an HTML5 <figure> which has a two column layout with an image in each column are one imae spanning both columns.
When one image is present the file is inserted in two sizes for computer and mobile devices.
Lazy Load
Images for responsive pages must be sized approppriately amd optimised before importing into EverWeb and should have the lazy loading function turned on if they are not in view at page load.
Text Content
The panel can be used for text only by turning off the image insert function.
Page Performance
Responsive web pages must download in under 2 seconds. More importantly the time for it to become interactive needs to be just about as fast.
Both the full site and the mobile version of the site must be checked out using Google PageSpeed Insights to find out what improvements are required for peak performance.
Follow the link below to find out more about download efficieny and the latest requirements for cookie control.
Navigation
Research has shown that the traditional horizontal navigation at the top of the page doesn't encourage visitors to click through to other pages and a click to drop navigation with the action tab at the top right is really inconvenient for mobile device users.
The best type of navigation is vertical with overflow scrolling with the action tab moving to the bottom half of the screen on mobile devices.
An offscreen navigation gives the visitor a better interactive experience.
Navigation requires quite a large chunk of space so it is better to show it only on the landing page and have a home link in the header of all the other pages.
Footers
A footer isn;t really required and forces mobile phone users to do a lot of scrolling and loads a lot of useless info to be repeated on every page.
For mobile devices the footer should be replaced with a bottom info bar. If a footer is really necessary use one with a show/hide on click footer like the one on this page.