EverWeb Widgets

Responsive Website Links

Links on responsive page designs need special consideration since they must work well and give a good user experience on two very different devices - computers and touch devices.
Text links with contrasting and hover colors are outdated. They break up the flow of text and are pretty much useless on touch devices like the iPad and iPhone. A link for a touch device must have an easily viewable target area of at least 32px in width and height.
Image links would appear to be better in that they offer a large target area but how is the visitor supposed to know that the image is a link when they have no cursor to tell them that it is? Image links require either an icon or a descriptive caption and these may not be desirable options in many cases.
Modern web design has embraced the CTA (Call To Action) link - not just for its functionality but also for its eye catching prominence. A well designed CTA will not only be obvious but will make it hard for the visitor to resist clicking it.
Many of the widgets available on this site have CTAs built in but there are occasions when more are required such as below a block of text linking to more info, products or related services.

CTA Links

The CTA link bar can accomodate up to eight links. The first six can be configured as internal or external links to open in a new window if required. The last two are for email and phone number. The phone tab becomes a "Call Me" button on mobile phones.
The links are centered in the browser and layed out inline. As the browser/device width is reduced, the links will return to two or more lines.
Each link tab can have a different font color and background. The tabs have a minimum width setting if it is necessary to have all the links of equal width despite varying text content.
The height of the tabs can be adjusted using the value for top/bottom padding and the horizontal and vertical spacing between the links can be adjusted. There is a control for setting a border radius.
Container
As can be seen from the above example, the container can have an optional heading to specify the nature of the links. The container has options to adjust the background color and opacity and to add both padding and vertical spacing from the items above and below it.

Tab Links

The tab links use the EverWeb Widget API Assets list to add links so it can accomodate up to 48 links for creating a main or sub navigation or CTA and info links. The container has a maximum width setting so the links will return to two or more lines when the browser/device width narrows.
The links can be aligned left, center or right in the container. They can have a hover color for use when they are displayed on a computer.
The tabs can have a solid background color or a border. Both the container and the link background colors have an opacity slider for creating see through links.
There is a minimum width control and the items have adjustable horizontal and vertical spacing. The container itself can be spaced vertically from the items above and below it.