EverWeb ThemeKit Text

Headings

H

ThemeKit Text Heading

The ThemeKit Text Heading widget creates an h1 through h3 heading with controls tp thicken up Google hosted fonts that don't have adjustable font weight.
Using Headings
All EverWeb responsive widgets, themekit widgets and themes use HTML5 containers for more efficiency, better layouts with less code and improved search engine indexing. In an HTML5 element the first heading is always an h1 since it is regarded as a mini "page".

  • h1 is used for the website name which is normally in the header
  • h2 is used for the page name
  • h3 is used for section headings or to denote a change in subject/content type

The heading has the option to add a letter/number or a styled SVG icon which is configured as an internal link.
Animation
The heading text has the option to add a swing in animation. The animation occurs when the heading enters the viewport. The animation is turned off for mobile phones since animation on these devices only causes confusion.

ThemeKit Text Widget

Text is the mainstay of a website so it needs to be easy to read with a sensible choice of font family, color and background.
Ideally text should be sans-serif, have a minimum font sie of 15px, black on a slightly off white background.
The background color used for this item is #F8F8F8 to reduce glare.
Avoid
Using bold, italic or letter spacing causes problems for about 20% of website visitors who suffer from the various types of reading difficulty.
Container
Text should be inserted in an HTML5 <article> container. Using an EverWeb's default text item is really inefficient and requires a lot of unnecessary code and results in poor search engine indexing.

Content

Web page text should be …

  • Inserted in an appropriare HTML5 container
  • Include an h1 heading with keywords for search engine indexing
  • Line length no more than 960px for readability
  • Use <mark> tags to highlight words or phrases
  • Use styled <span> tags for paragraph headings

Links

Text links with the oudated underline should never be used on a responsive website. They are not user friendly and do not comply with Google's criteria for a touch device active input.
An links required to related info should be mobile friendly and inserted below the text. Use the mark tag to indicate words that have a related link further down the page.

SVG Icons

Professional web desingers have been using SVG (scaleable vector graphic) icons for a number of years. They are more efficient and better quality than font ions like Font Awesome.
Never use PNG images for icons. The file size is much bigger than the equivalent SVG or font icon and each one requires a separate server request which contributes to poor download performance.

SVGs

The EverWeb ThemeKit widgets have a link to download 100s of SVG icons in the widget pack download folder's "Read Me First" file.
To install an SVG …

  • Double click the icon to open it in TextEdit.app or a code editor
  • Copy the code & paste it into the SVG box in the widget settings

SVG Download Folder

The SVG download folder has the iicons arranged in four folders for custom icons, ios-icons, logo icons and md-icoms.
The latest version has the X icon to replace the redundant Twitter icon.
Software
macOS users can download the freeware CotEditor which is a sinple plain text editior suitable for opening SVGs to copy the code …