Headings & HTML5

Modern websites use HTML5 rather than the outdated HTML4 used by the EverWeb developers.
HTML5 allows the use of semantic containers and items which result in better indexing by the search engines.
An HTML5 container is like a mini page in that it can have a header, content and a footer. As such, the first heading is always an h1.
This means that only h1 through h3 headings are required …

• h1 is used for the website name and the first heading in an HTML5 container
• h2 is used for the page name
• h3 is used to indicate a new section or a change of subject

Basic Styles

Bold, italic and letter spacing should be avoided in website text since they cause problems for over 20% of the visitors who have eyesight or reading difficulties.
Many Google hosted fonts do not have the option to change the font weight.
The font used on this page is Stint Ultra Expanded which has no weigtht variations. To make the heading more prominent the widget has the option to add a text shadow to thicken it up and a letter spacing control to compensate

More/Less Text

Large chunks of continuous text tend to make a layout look boring and cause the visitor’s eyes glaze over.
Text should always be broken up into defined containers with plenty of white space around them. Where large amounts of text are unavoidable, their overpowering effect can be reduced by using a more/less function.
The item consists of an HTML5 <article> element with a heading, two paragraphs and an open/close tab.
The second paragraph is hidden on page load and is revealed when the tab is clicked/tapped.
NOTE: that the more/less function is optional and the widget can be used for text entry without it.
A custom jQuery plugin is used to create the show/hide, animation and the toggle tab text.
Toggle Tab
A CTA tab is used rather than a text link since this gives a better target for fingertips when the page is viewed on touch devices.
The text for the open and closed position can be changed and the toggle animation speed which is set in milliseconds can be adjusted.

Tab
As can be seen from the above, spans can be inserted. There are controls to adjust their font size and color.
The tabs can be styled with a solid background and border radius or can have a border which inherits the text hover color.
The more/less tab is located to the right and there is the option to add a hyperlink to the left. This can be configured to open internal or external pages and in a new window if required.
Container
The container can be styled with a border and/or box shadow and its vertical spacing from the items above and below adjusted.