ThemeKit Basic

Tel: 012 345 6789

ThemeKit Basic Hero

Hero Image

Optional logo/link and an article with heading, text and one or two optional links.

JumbotronJumbo [2]
Tel: 012 345 6789

Basic Content Items

Links

Links in text should not be used on responsive pages since they cannot comply with Google'scriteria for target area and clear spacing.
Any links relating to text content should be include in the container. If more are required a separate row of links can be inserted below the item.
The ThemeKit Basic links create a row of block links with a background hover animation and the option to add a double chevron icon to add some chaeacter to the page layout.

Hero Image

Most websites have a hero item which shows on page load, This is a full width, fixed height item with some text content and one or two links.
The hero above has the ThemeKit Basic Header widget overlaying it at the top andd the ThemeKit Basic Toolbar widget overlaying at the bottom to create a full function page header.
A well designed and fast loading hero will have …

  • Insert the images in three sizes for the various viewing devices
  • Insert the images in an HTML5 <picture> element
  • Alt text keywords for the search engine
  • An optional lazy loading function
  • At least one CTA (call to action) to entice visitors to click through to another page

Basic Hero

The hero is shown above in its basic form with the text block centered horizontally and vertically.
Follow the link below to see the hero with the optional log link and the parallax scrolling option implemented.
Parallax
The parallax scrolling is adjusted using a slider.
At zero the image is relatively position to scroll with the rest of the content.
At maximum the hero is fixed and allows the content belwo to scroll over it.
A good starting point for parallax scrolling is to set the slider at 50%

Hero Parallax

Header

The ThemeKit Basic Header widget creates an h1 page heading with options for for a logo/link and a phone number/mobile phone function. It uses a grid layout with the option for a two color gradient background and essential styles for Google hosted fonts.

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 give 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

Responsive Text

The ThemeKit Elements Text widget uses an HTML5 article element.
It has an optional header with an h1 heading, an optional h2 heading, text and an optional footer with one or two optional links.
Font & Styles
In consideration of the 20% of visitors who have reading difficulties use a sans-serif font and avoid using bold or italic text.
Size & Color
The minimum font size should be 16px or 15px if using Verdana. When using black/dark colored text avoid using a pure white background which causes glare and eye strain.
Use an off white background such as #F0F0F0.

Extra Items

In place of bold or italic to draw attention to keywords use a styled mark. Underlines are best avoided since visitors will confuse them with outdated underlined text links.
This is an example of underline and a mark in text.
The default browser styling for <mark> is a nasty yellow color. Adding styles for font color, background and padding improve it a lot.
Links
Links in blocks of text should be avoided. Links need to be about 32px in height with a clear area of 40px from the center to comply with Google's criteria for mobile touch devices.
Use CTA style links below the text or insert a link bar below the text widget for links related to the text content.
The optional links are positioned at the bottom and have a background color hover animation.

Page Loading

Most websites have a hero item visible on page load and sometimes a slideshow. These items require fairly large images to be loaded even when lazy loading is used.
To allow a little extra time for the fisrt image to load and create a smooth, professional content fade in the ThemeKit Basic Fad In widget is used above the footerbar to act as a spacer.
It has a height control, the option for a solid or two color gradient background and a fade in time control set in milliseconds.