Mobile First Image Insert
A image on its own isn't really much use to the website visitors or the search engines. A single image inserted at content width is far to large to be downloaded on mobile devices.
EverWeb Widgets
Images
ThemeKit M1 Image Insert
Any content width image on a responsive web page needs to be inserted in at least two sizes - if not three. If the image is to be properly indexed by the search engines it must have alt text and be inserted in an HTML5 <figure> element along with a <figcaption>. The figcaption should include the image title and a text description.
Images
The ThemeKit M1 Image widget inserts the image file in three sizes. The images in the demo are 960 x 640px, 720 x 480px and a 400 x 600px image for phones in portrait mode which gives a lot better user experience than a landscape image.
Styles
The definition of an image can be improvide in most cases by adding a 1px border to separate it from the background.
Adding a box shadow to the bottom edge helps to lift it off the canvas and can be achieved by using a negative spread radius.
Relating
Using the figure and figcaption elements effectively lets the search engines know that the text info is related to the image.
Inserting a border and/or box shadow visually groups them and adding padding to the container creates white space to separate the item from the rest of the page contaent making it easier for the visitor to locate and focus on it.
Links
If images are used as hyperlinks they need to have an icon to let mobile devices users know that it is a link. A better alternative is to use a CTA (call to action) style link in the figcaption.
Overlay Navigation
The ThemeKit M1 Overlay Naviagtion is probably about the best type to use for all devices. Research has shown that a centered vertical navigation is far more likely to get visitors to click through to other pages than a horizontal one.
Using an overlay helps the visitor to focus on the links without being distrated by the content behind it.
Action Tab
The tab has the usual "trigram for heaven" icon and a span for text which helps to make it a lot more visible.
The tab is position at the top lef when viewed on browser/device screen widths above the break point and has controls for adjusting its position on the X and the Y-axis.
Below the break point the text is removed, the tab moves to the bottom of the device screen to make it easy for mobile users to reach and can be positioned on the left or right.
Links
The navigation can have any amount of links. When its height becomes greater then the screen any overflow will scroll into view.
The links have a background hover animation and the current page can be indicate by using a different color for the "active" background.
There are controls for adding a styled link separator if required.
Overlay
The overlay has controls for background color and its opacity. It can be closed using the "close" icon at the top right or by clicking anywhere outside of the navigation.
Website Search
Due to the limited size of the screen one of the most important items for the website when viewed on mobile phones is a search function.
The ThemeKit M1 Search Tab opens a lightbox window with an input module for a Google custom search function.
The widget has a link to Google for info about getting a custom search ID.
The icon is an SVG "search" icon with controls to adjust its color, hover color, background color and opacity and the padding. Adjusting the padding changes the relative size of the icon.
Position
The link can be positioned top or bottom and left center or right with controls to adjust its position on the X and the Y-axis.
There is a control for adjusting its z-index to bring it to the front of other items on the page.
NOTE: The tab can be hidden on tablets and/or computers if required.
Search EverWeb Widgets ...