Potential visitors surfing the web are constantly being irritated by popups, EU GPRD notices, Google ads and worse.
If such an item is necessary make it slide in smoothly and be easily dismissed.
The Side Note appears half way down the browser/device window and can be left or right. It has a heading, text and an optional link to open internal or external pages.
It has a max width setting which would need to not excede 300px for mobile phones. There is a breakpoint control turned on with a checkbox to hide it on smaller devices if required.
The slide in animation has controls for animation time in milliseconds and delay in seconds.
Sometimes a proper list with info about the target page's content is better for navigating to other pages, sections, products or service …
Take web page text to the next level using features like styled separators, block quote and mark …
Inserting images in responsive pages requires resizing, optimising and providing a smaller image for mobile devices …
The hero image has become a very popular feature in websites but needs special consideration for responsive pages …
Navigation is very important but is poorly designed and implemented on a huge number of websites …
Aim for a Google test score of over 90 and a really fast time for interaction to be available. Most pages don't!
Find out why most footers are an ugly waste of space and a major aggravation for mobile phone users …
Go to the RWD Media section of this site to find out to insert images, slideshows and video players in responsive pages …
Links in text have fallen by the wayside with the large number of vistors using mobile devices. The minimum size of the link should be about 32px x 32px but, more inportantly, the clear area arounf the link should be a minimum 44px.
As an example, the links in the Link List further up the page are 36px in diameter but the clear area around them is over 60px.
Obviously this makes text links obsolete.
Tab Links
Most of the EverWeb ThemeKit widgets have at least one CTA style link tab. If more are required to link to external items associate with the content they can be added using the RWD Links widget.
The links have a hover transition as all good links should and have the option to add a chevron animation to add some style to the page design.
The links have a flex layout so they will return to two or more lines as the browser/device width decreases.
The responsive Bar Link shown above can be used for various purposes like providing links to other sections of the site or previous/next links at the bottom of the page.
It has a three column grid with an optional "back" link at the left, text and another link at the right.
Both links can open internal or external pages or files and have a new window option.
The landing page hero item with its CTA (call to action) is the first opportunity to grab a visitor's attention and get them to click through to other pages of the site.
The last chance is when they move the mouse cursor up to the web address to go elsewhere.
Before You Go …
When the visitor moves the mouse pointer into the browser address bar with the intention of leaving the site the notice pops up in the middle of the screen.
It can be used to notify visitors of a special offer or some other reason why they shouldn't leave the website.
The exit notice has options for a heading, text, a list and a CTA style link. The list has a selection of custom list style types.
The floating close button adds a professional touch and there is an option to have the notice disappear when the link is clicked.
Check out all the new stuff from EverWeb Widgets …
The best web design & layout system for EverWeb
Info